Question

我有两个自定义样式的单选按钮，如下图所示[仅为示例]

＆＃13;

li {
  width: 100px;
  border: 1px solid black;
  display: inline-block;
}

＆＃13;

<ul>
  <li>
    <input type="radio" name="radio-test" id="radio1">
    <div>
      <label for="radio1">Radio One</label>
    </div>
  </li>
  <li>
    <input type="radio" name="radio-test" id="radio2">
    <div>
      <label for="radio2">Radio Two</label>
    </div>
  </li>
</ul>

＆＃13;

一旦这看起来更漂亮，我理想地希望点击包含单选按钮的框内的任何地方都应该触发激活该选项。

我的队友使用自定义样式和图片来显示选择，因此我不想修改CSS。

我试图想办法用Javascript实现上述功能。

攻击click上的li事件处理程序，并触发基础click上的input，但这会导致无限递归事件触发器。

这引发了我的两个问题：

有没有办法停止点击递归？我在JS触发的点击上尝试preventDefault和stopPropagation但是   他们似乎没有达到我想要的目的。



我们可以使用JavaScript（或jQuery，如果需要）来区分真正的鼠标点击和JS触发的点击事件吗？

Answer 1

你走在正确的轨道上。您只需要停止从输入传播到列表项的传播：

$('li').click(function() {
  $(this).find('input').click()
})
$('input').click(function(e) {
  e.stopPropagation();
})

li {
  width: 100px;
  border: 1px solid black;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="radio" name="radio-test" id="radio1">
    <div>
      <label for="radio1">Radio One</label>
    </div>
  </li>
  <li>
    <input type="radio" name="radio-test" id="radio2">
    <div>
      <label for="radio2">Radio Two</label>
    </div>
  </li>
</ul>

单击触发单选按钮，无需单击

1 个答案: