From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/event/stopimmediatepropagation/index.html | 89 ++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 files/zh-cn/web/api/event/stopimmediatepropagation/index.html (limited to 'files/zh-cn/web/api/event/stopimmediatepropagation') 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 +--- +

{{APIRef("DOM")}}

+ +

{{domxref("Event")}} 接口的 stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。

+ +

如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ,那么剩下的事件监听器都不会被调用。

+ +
+

译者注:注意与 event.stopPropagation() 之间的区别

+
+ +

语法

+ +
event.stopImmediatePropagation();
+
+ +

例子

+ +
<!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>
+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Event.stopImmediatePropagation")}}

-- cgit v1.2.3-54-g00ecf