javascript - 从 JavaScript 函数访问事件对象

Question

我有类似下面的内容:

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

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

在网络上搜索，我找到了对 event.stopPropagation() 和 event.cancelBubble() 的引用，它们可以防止事件冒泡 到父元素。

两个问题:

1. 如何从 doSomethingElse() 获取事件对象？

2. 是否有必要同时使用 event.stopPropagation() 和 event.cancelBubble()，或者业界是否已经为此制定了标准？

Answer 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 事件绑定(bind))

Example Fiddle

---

2.) 我已经开始看到使用 cancelBubble 的人松懈了，而是完全切换到 stopPropagation (之前主要用于遗留 IE 支持) .此外，MDN 文档说要改用 stopPropagation，因为 cancelBubble 既“非标准”又“已弃用”(source)。

(注意:单独使用 stopPropagation 不会停止默认事件。为此，您需要调用 event.preventDefault() ( source ).