diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/event/stopimmediatepropagation | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/event/stopimmediatepropagation')
-rw-r--r-- | files/zh-cn/web/api/event/stopimmediatepropagation/index.html | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/event/stopimmediatepropagation/index.html b/files/zh-cn/web/api/event/stopimmediatepropagation/index.html new file mode 100644 index 0000000000..542df3f67d --- /dev/null +++ b/files/zh-cn/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,89 @@ +--- +title: event.stopImmediatePropagation +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - 事件 + - 参考 + - 方法 +translation_of: Web/API/Event/stopImmediatePropagation +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Event")}} 接口的 <code><strong>stopImmediatePropagation()</strong></code> 方法阻止监听同一事件的其他事件监听器被调用。</p> + +<p>如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 <code>stopImmediatePropagation()</code> ,那么剩下的事件监听器都不会被调用。</p> + +<div class="blockIndicator note"> +<p>译者注:注意与 <code>event.stopPropagation()</code> 之间的区别</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>event</var>.stopImmediatePropagation(); +</pre> + +<h2 id="例子">例子</h2> + +<pre class="syntaxbox notranslate"><!DOCTYPE html> +<html> + <head> + <style> + p { height: 30px; width: 150px; background-color: #ccf; } + div {height: 30px; width: 150px; background-color: #cfc; } + </style> + </head> + <body> + <div> + <p>paragraph</p> + </div> + <script> + const p = document.querySelector('p') + p.addEventListener("click", (event) => { + alert("我是p元素上被绑定的第一个监听函数"); + }, false); + + p.addEventListener("click", (event) => { + alert("我是p元素上被绑定的第二个监听函数"); + event.stopImmediatePropagation(); + // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行. + }, false); + + p.addEventListener("click",(event) => { + alert("我是p元素上被绑定的第三个监听函数"); + // 该监听函数排在上个函数后面,该函数不会被执行 + }, false); + + document.querySelector("div").addEventListener("click", (event) => { + alert("我是div元素,我是p元素的上层元素"); + // p元素的click事件没有向上冒泡,该函数不会被执行 + }, false); + </script> + </body> +</html> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event.stopImmediatePropagation")}}</p> |