javascript - 嵌套元素中的多个事件

Question

我正在尝试创建一个包含复选框和其他输入元素的网络表单，我想为用户提供在单击包围的 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。

Answer 1

使用 <label>具有适当定向的元素 for attribute :

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

Demo here .

好处是标记在语义上变得令人满意。请注意 for如果您像这样包装目标控件，则该属性在技术上是可选的，但 IE<7 不支持该属性(但在发布的示例中可以正常工作)。