从 JavaScript 函数访问事件对象答案

【问题标题】：Accessing Event Object from JavaScript Function从 JavaScript 函数访问事件对象
【发布时间】：2014-07-21 19:42:45
【问题描述】：

我有类似以下的内容：

<div onclick="doSomething()">
   Content...
   <div onclick="doSomethingElse()">
   </div>
</div>

当doSomethingElse() 被调用时，我不希望doSomething() 也被调用。

在网上搜索时，我发现了对 event.stopPropagation() 和 event.cancelBubble() 的引用，它们阻止了事件冒泡到父元素。

两个问题：

如何从doSomethingElse()获取事件对象？
是否有必要同时使用event.stopPropagation() 和event.cancelBubble()，或者业界已经为此制定了标准？

【问题讨论】：

您可以考虑使用事件委托来简化事情：例如，this

标签： javascript stoppropagation cancel-button

【解决方案1】：

1.) 您可以将事件作为函数的第一个参数传入：

<div onclick="doSomething(event)">
   Content...
   <div onclick="doSomethingElse(event)">
   </div>
</div>

<script>
    function doSomethingElse(e) {
        // Prevent the doSomething event from being propagated after this one:
        e.stopPropagation();

        //OPTIONALLY: Prevent the *default* event from occurring:
        e.preventDefault();
    }
</script>

（注意：同样适用于 jQuery 事件绑定）

Example Fiddle

2.) 我开始看到使用cancelBubble 的人有些松懈，而是完全切换到stopPropagation（以前主要用于旧版IE 支持）。此外，MDN 文档说要改用 stopPropagation，因为 cancelBubble 既是“非标准”又是“弃用” (source)。

（注意：单独stopPropagation 不会停止默认事件。为此，您需要致电event.preventDefault() (source)。

【讨论】：

我不知道我可以添加event 作为这样的参数。它从哪里来的？我试试看。
它总是在事件触发后作为第一个参数传递。由于它是 JavaScript，您可以完全忽略它作为参数，一切都会好起来的。

【解决方案2】：

你应该如下定义`doSomethingElse'：

var doSomethingElse = function(e){
    // e: event object ... so ...
    e.stopPropagation(); // enough
};

您还应该在调用中传递事件对象：doSomethingElse(event)

event.stopPropagation() works on all browsers, as for IE, works as expected on IE9 and later.

【讨论】：