从 onclick 处理程序停止事件传播答案

【问题标题】：Stopping event propagation from an onclick handler从 onclick 处理程序停止事件传播
【发布时间】：2014-05-06 18:24:47
【问题描述】：

我正在开发一个遗留 Web 应用程序，我正在逐步将其 ajaxifying 并发现需要停止从内联 onclick 处理程序传播事件。

以此为例：

<a id="inner" onclick="return handleOnclick();" href="#">Some link</a>

除了 onclick 处理程序之外，还有一些使用addEventListener 添加的侦听器。我需要在某些条件下 onclick 处理程序可以停止事件的传播。我试过event.stopPropagation()，但它似乎不起作用。这是一个要测试的jsfiddle：

http://jsfiddle.net/APQk6/985/

有什么想法吗？

【问题讨论】：

您必须将事件对象传递给事件处理程序。但真正的问题是 stopPropagation 不会阻止同一元素上的事件处理程序。
尝试 event.preventDefault()。 stackoverflow.com/questions/18971284/…
@FelixKling 事件对象存在（window.event），可以在jsfiddle中查看。回覆。 “真正的问题是 stopPropagation 不会阻止同一元素上的事件处理程序”，您能提供参考吗？
window.event 在 Firefox 中不存在。只需查看 MDN 或 quirksmode.org 上的文档， event.stopPropagation 只会阻止事件冒泡。（我正在打电话，我现在无法提供链接）。
@RobertMunn 我已经在尝试了，请参阅 jsfiddle。

标签： javascript dom javascript-events

【解决方案1】：

找到了基于Felix Kling'scmets的解决方案：

需要调用event.stopImmediatePropagation() 而不是event.stopPropagation()
需要从内联处理程序中传递实际的事件对象（this question 也很有用）

这是一个可行的解决方案：

http://jsfiddle.net/r95cC/3/

【讨论】：

哦，我知道 jQuery 有 stopImmediatePropagation，但不知道它现在已进入 DOM 规范。凉爽的！虽然我想知道浏览器支持是什么。
好问题。它是 DOM 3 级规范草案 (w3.org/TR/DOM-Level-3-Events/…) 的一部分。我已经在桌面 Chrome、Desltop Firefox、iPad 和 iPhone 上测试过了。
@kol 如果不支持 stopImmediatePropagation，您的解决方案可用作后备:)

【解决方案2】：

您可以使用“已取消”属性。不好，但有效。 http://jsfiddle.net/koldev/45zbA/

HTML

<script>
function handleOnclick(self) {
    self.setAttribute("cancelled", confirm('Stop event?') ? "1" : "0");
    return false;
}
</script>

<div>
    <a id="inner" onclick="return handleOnclick(this);" href="#">Some link</a>
</div>

JavaScript

document.getElementById('inner').addEventListener('click', function(e){
    if (this.getAttribute("cancelled") == "1") {
        return;
    }
    alert("Listener called");
});

【讨论】：

感谢您的建议，虽然看起来 stopImmediatePropagation 是我要找的。span>