Jquery 事件冒泡复选框答案

【问题标题】：Jquery Event Bubbling CheckBoxJquery 事件冒泡复选框
【发布时间】：2009-01-18 22:46:22
【问题描述】：

我有一个带有复选框的表单，然后是复选框右侧的文本。复选框的单击事件附加了 jquery 事件。我想要的是允许用户单击标签或复选框并让复选框选中/取消选中并触发事件。下面是我正在尝试做的简化版本（不要运行下面的代码，因为它会创建一个无限循环）。

<script>
$(document).ready(function() {
  $("form p").click(function() {
    $(this).find("input").click();
  });

  $("form input").click(function() {
    alert("clicked");
  });  
});
</script>


<form>
<p> <input type="checkbox" name="checker" value="1" /> Click anywhere</p>
<p> <input type="checkbox" name="checker2" value="2" /> Click anywhere</p>
</form>

【问题讨论】：

标签： javascript jquery events

【解决方案1】：

使用 LABEL 标签：http://www.w3schools.com/tags/tag_label.asp

【讨论】：

【解决方案2】：

点击任何<input>标签会触发<p>标签的点击事件（因为<input>标签在<p>标签内）然后触发<input>标签的点击事件导致死循环。

【讨论】：

【解决方案3】：

您可以使用jQuery's event.stopPropagation method 防止“无限循环”。

【讨论】：