嵌套元素中的多个事件

Question

我正在尝试创建一个包含复选框和其他输入元素的Web表单,并且我想在单击包络div元素时向用户提供检查和取消选中框的abilituy.

这是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属性的元素:

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

在这里演示.

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