嵌套元素中的多个事件答案

【问题标题】：Multiple events in nested elements嵌套元素中的多个事件
【发布时间】：2009-11-29 00:55:11
【问题描述】：

我正在尝试创建一个包含复选框以及其他输入元素的 Web 表单，并且我想为用户提供在单击包围 div 元素时选中和取消选中复选框的能力。

这是一个 HTML 示例：

<div class="line">
  <input type="checkbox" />
  <p>No, I don't want more newsletters</p>
</div>

足够简单。现在，当用户单击复选框时，它会被选中/取消选中，并且事件会冒泡到 div.line 元素，这可能会更改其背景颜色或其他内容。现在，正如我所说，我还希望用户能够通过单击 div 来操作复选框值。听起来很简单；我们只需将观察者添加到 div.line 元素，捕获事件并切换复选框值。那么问题来了：当您单击复选框时，它的值被切换。但是，由于它位于 div 中，因此您还可以单击 div，触发其观察者，从而再次切换复选框值。所以你结束了你开始的地方。发生两次切换。

我一直在为此绞尽脑汁，尝试了所有不同的方法。自定义事件、自定义元素标志... 在单个函数运行期间根本无法分辨是单击了复选框还是周围的 div 元素。但一定有办法，就是看不到。

有人知道吗？顺便说一句，我正在使用 Prototype。

【问题讨论】：

你真的想要一个<label>标签作为@Crescent Fresh的回答，完全跳过JavaScript。如果您愿意，可以使用 CSS 更改标签的大小和形状。

标签： javascript prototypejs

【解决方案1】：

使用带有适当定向的for attribute 的<label> 元素：

<label for="cb"><input type="checkbox" id="cb" /> Click anywhere here</label>

Demo here。

好处是标记在语义上变得容易接受。请注意，如果您像这样包装目标控件，for 属性在技术上是可选的，但 IE

【讨论】：

【解决方案2】：

您不必将任何事件绑定到内部输入元素。您只需要将事件附加到父 div，您应该能够实现您想要做的事情。该行为基于事件冒泡机制。当您单击输入框时，事件会冒泡到外部 div（与事件捕获相反，它从父级遍历到其子级）。

因此，一个简单的 div.line 事件处理程序可以为您解决问题。

$('.line').click( function (evt ) {
    console.log("change color here");
    $('input[type="checkbox"]').attr('checked','checked');
});

【讨论】：