相关元素上的 JavaScript 事件答案

【问题标题】：JavaScript events on related elements相关元素上的 JavaScript 事件
【发布时间】：2012-03-04 11:35:15
【问题描述】：

我想知道以下行为是否正确。

我有一个标签元素通过“for”属性链接到输入元素，这是否应该在单个用户单击标签时产生两个单击事件？具体来说，在窗口上放置一个点击监听器。然后，使用属性“for”定义带有标签元素的复选框。单击标签文本。结果是复选框将被选中，您将看到两个点击事件。 http://jsfiddle.net/k55uD/2/

如果这种行为是正确的，是否还有更多这样的案例、属性或其他？一些规格会很好。

感谢任何帮助。

附：我用示例更新帖子。

【问题讨论】：

您可以发布与您的问题相关的代码吗？
没问题，我的第一条评论似乎令人困惑，所以它被删除了。
好的，我添加了代码和示例。很抱歉造成混乱。

标签： javascript html events dom

【解决方案1】：

单击label 将触发附加到label 的任何onclick 函数和附加到input 本身的任何onclick。点击input 将仅触发input 的onclick。

这很容易测试。见这里：

http://jsfiddle.net/zptw3/

【讨论】：

抱歉最后的评论，我试图回答另一个人:) 是的，我看到这种情况正在发生，我可以通过处理这些极端情况在我试图构建的系统中轻松克服这个问题.我想知道这有什么规范吗？我对行为模式感兴趣。谢谢！

【解决方案2】：

DOM 将分别处理每个元素，因此标签和它所“用于”的元素都可以定义事件处理程序。所以是的，如果两个元素都有一个 onclick 处理程序并且点击在每个元素内，那么这两个事件都会触发。

但是，这是您必须定义的内容，默认情况下，您不会因为标签是“为”另一个元素而在标签上获得第二次点击。

基本上，这取决于您 - 您可以将其设置为引发两个事件或一个事件，但开箱即用您会为定义处理程序的元素引发一个事件。

这很好地解释了事件和事件顺序，并提供了一些关于浏览器怪癖的建议。

http://www.quirksmode.org/js/events_order.html

编辑：

如果你具体来说，在窗口上放置一个点击监听器。然后，由于传播，您将获得这两个事件，这在提供的链接中再次进行了说明。

【讨论】：

我不这么看。您可以使用 for 制作带有标签的复选框。将点击监听器添加到窗口。单击标签文本，您将看到该复选框将被选中，您将看到两个事件。
您将事件添加到窗口，而不是标签或复选框 - 所以当然可以...通过答案中指示的传播。如果你具体来说，在窗口上放置一个点击监听器（根据你的编辑）那就是行为。
对不起，我之前和现在都阅读过这个链接，但它仍然没有给我答案。首先，处理程序是为捕获阶段定义的，而不是同时进行捕获和冒泡。其次，正如文章所说：“理解在捕获和冒泡阶段（如果有的话）这个目标不会改变是非常重要的”并且在我提供的代码中目标是不同的。第三，目标元素是兄弟元素，不是嵌套的。也许我错过了重点？谢谢！
我又看了一遍你的jsfiddle，把onlick换成onfoucs。即 document.getElementById("test_label").onfoucs = function() { alert("test_label"); };
对不起，我不确定你想用这个例子说什么。点击对我来说仍然是一个问题。正如我在帖子中提到的，我感兴趣的是这种行为发生时是否存在模式。我不认为这是一个错误，因为它是跨浏览器的。