Question

我有类似以下的内容：

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

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

在网上搜索时，我找到了对event.stopPropagation()和event.cancelBubble()的引用，这会阻止冒泡到父元素。

两个问题：

如何从doSomethingElse()获取事件对象？
是否有必要同时使用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事件绑定中的工作方式相同）

<强> Example Fiddle

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

（注意：仅stopPropagation不会停止默认活动。为此，您需要致电event.preventDefault()（source）。

Answer 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。

从JavaScript函数访问事件对象

2 个答案: