1

我有类似以下内容：

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

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

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

两个问题：

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

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

4

2 回答 2

2

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 事件绑定）

示例小提琴

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

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

于 2014-07-21T19:45:33.450 回答
0

你应该定义 `doSomethingElse' 如下：

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

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

event.stopPropagation()适用于所有浏览器，对于 IE，在 IE9 及更高版本上按预期工作。

于 2014-07-21T19:51:41.783 回答