父元素阻止冒泡时未触发单击事件

Posted 2023-05-07

【中文标题】父元素阻止冒泡时未触发单击事件

【英文标题】：click event not being fired when parent element prevents bubbling

【发布时间】：2011-07-03 16:07:06

【问题描述】：

我在一些现代浏览器中进行了测试，结果不一致。我确信这与捕获与冒泡事件支持差异有关。我已经设置了一个测试环境来复制这里的问题：pastebin 并使用this service 运行实时预览。

问题是这样的：当祖先阻止冒泡时，一些浏览器会忽略锚点 href 点击事件。这是没有意义的，因为中间元素会在它冒泡之前触发它的事件，但锚元素不会。为什么 javascript click 事件有效而 href 事件无效？

这是按下“点击我”时的结果：

Chrome 9.0.597.98：忽略 href + 打印内部和外部

IE 8.0.6001.19019：href 有效 + 打印内部和外部

Firefox 3.6.13：忽略 href + 打印内部和外部

所以我的最终问题是：当祖先元素阻止事件冒泡时，如何让 href 跨浏览器工作？任何见解将不胜感激。

编辑：

我只想指出，Pointy 的 cmets 中的讨论仍在继续，我还要感谢他的巨大帮助！

【参考方案1】：

问题是它不是

event.returnResult = false;

在 IE 中是：

event.returnValue = false;

该链接在 IE 中通过，因为您没有正确告诉浏览器不要采取默认操作。

如果您想要执行默认操作，请不要调用“.preventDefault()”，也不要将“returnValue”设置为false。

【讨论】：

确认！谢谢你的回复，你是对的，它是returnValue。不知道我是怎么错过的。

我还是希望有人能提供一个实际的解决方案。

看那段代码，其实是一回事。 <div> 上的事件处理程序在事件对象上调用“preventDefault()”。您应该了解，传递给处理程序的事件对象对于所有这些都是相同的 - 换句话说，只有一个事件对象，并且它被传递给处理程序的每个容器元素沿着 DOM .如果 任何 处理程序调用“preventDefault()”（或 IE 将“returnValue”设置为 false），则不会执行默认操作。

好的，这更容易理解 :-) 好吧，正如我所写，问题是您的代码仍在事件对象上将“returnValue”设置为false。对于发生的任何一次“单击”，只有一个事件对象，并且当它冒泡时，同一个对象被传递给所有事件处理程序。如果 any 处理程序将“returnValue”设置为false，则不会发生默认操作。

是的，没错——“stopPropagation”使冒泡过程停止，如果没有阻止默认值，它将在处理程序退出后立即发生。