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

Question

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

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

 <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> 

一旦使它看起来更漂亮，我理想上希望在单击包含单选按钮的框内的任何位置时都应触发该选择的激活。

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

我试图考虑一种使用Javascript实现上述功能的方法。

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

我想到了两个问题：

1. 有没有一种方法可以停止点击递归？ 我在JS触发的点击上尝试了preventDefault和stopPropagation ，但它们似乎无法实现我想要的功能。

2. 我们可以使用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>