嵌套元素中的多个事件

Question

我正在尝试创建一个包含复选框以及其他输入元素的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。

Answer 1

使用<label>元件与适当定向for attribute：

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

Demo here。

好处是标记变得语义上令人满意。请注意，for属性在技术上是可选的，如果以这种方式封装目标控件，但IE < 7不支持该属性（但对于此示例已正常工作）。

Answer 2

您不必将任何事件绑定到内部输入元素。你只需要将一个事件附加到父div，你应该能够实现你想做的事情。该行为基于事件冒泡机制。当你点击输入框时，事件会冒泡到外部div（而不是事件捕获 - 从父级到子级）。

因此，div.line的一个简单的事件处理程序可以帮你实现。

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