當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JS中如何阻止事件的传播

發(fā)布時(shí)間：2023/12/20 javascript 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS中如何阻止事件的传播小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一個(gè)事件發(fā)生后，會(huì)在子元素和父元素之間傳播（propagation）。這種傳播分成三個(gè)階段。這種三階段的傳播模型，使得同一個(gè)事件會(huì)在多個(gè)節(jié)點(diǎn)上觸發(fā)。

第一階段：從window對(duì)象傳導(dǎo)到目標(biāo)節(jié)點(diǎn)（上層傳到底層），稱為“捕獲階段”（capture phase）。
第二階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)，稱為“目標(biāo)階段”（target phase）。
第三階段：從目標(biāo)節(jié)點(diǎn)傳導(dǎo)回window對(duì)象（從底層傳回上層），稱為“冒泡階段”（bubbling phase）。

如果希望事件到某個(gè)節(jié)點(diǎn)為止，不再傳播，可以使用事件對(duì)象的stopPropagation方法。stopPropagation方法阻止事件在 DOM 中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽函數(shù)，但是不包括在當(dāng)前節(jié)點(diǎn)上其他的事件監(jiān)聽函數(shù)。

// 事件傳播到 p 元素后，就不再向下傳播了 p.addEventListener('click', function (event) {event.stopPropagation(); }, true);// 事件冒泡到 p 元素后，就不再向上冒泡了 p.addEventListener('click', function (event) {event.stopPropagation(); }, false);

案例：
（1）不阻止事件傳播的情況

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>32.事件監(jiān)聽</title><style>div{width: 300px;height: 200px;border: 1px solid red;}p{width: 100px;height: 100px;border: 1px solid black;}</style> </head> <body> <div id="div1">hello<p id="p1">world</p> </div></body><script>let div1 = document.getElementById('div1');let p1 = document.getElementById('p1');div1.addEventListener('click',function () {console.log('div1');});p1.addEventListener('click',function (event) {console.log(1);});p1.addEventListener('click',function () {console.log(2);});p1.addEventListener('click',function () {console.log(3);}); </script> </html>

（2）使用stopPropagation阻止事件傳播，可以看出外層的div綁定的click事件沒有觸發(fā)。

p1.addEventListener('click',function (event) {// 只能阻止這個(gè)事件的傳播，但是不能取消事件，后邊綁定的click監(jiān)聽函數(shù)可以正常觸發(fā)event.stopPropagation();console.log(1); });

stopPropagation方法只會(huì)阻止事件的傳播，不會(huì)阻止該事件觸發(fā)<p>節(jié)點(diǎn)的其他click事件的監(jiān)聽函數(shù)，也就是說后邊綁定的click監(jiān)聽函數(shù)可以正常觸發(fā)。

（3）使用stopImmediatePropagation
如果想要徹底取消該事件，不再觸發(fā)后面所有click的監(jiān)聽函數(shù)，可以使用stopImmediatePropagation方法。

stopImmediatePropagation方法阻止同一個(gè)事件的其他監(jiān)聽函數(shù)被調(diào)用，不管監(jiān)聽函數(shù)定義在當(dāng)前節(jié)點(diǎn)還是其他節(jié)點(diǎn)。也就是說，該方法阻止事件的傳播，比stopPropagation()更徹底。

如果同一個(gè)節(jié)點(diǎn)對(duì)于同一個(gè)事件指定了多個(gè)監(jiān)聽函數(shù)，這些函數(shù)會(huì)根據(jù)添加的順序依次調(diào)用。只要其中有一個(gè)監(jiān)聽函數(shù)調(diào)用了stopImmediatePropagation方法，其他的監(jiān)聽函數(shù)就不會(huì)再執(zhí)行了。

p1.addEventListener('click',function (event) {// 使得后面綁定的所有click監(jiān)聽函數(shù)都不再觸發(fā)，但是當(dāng)前的還是可以正常觸發(fā)event.stopImmediatePropagation();console.log(1); });

前端學(xué)習(xí)交流QQ群，群內(nèi)學(xué)習(xí)討論的氛圍很好，大佬云集，期待您的加入：862748629 點(diǎn)擊加入

總結(jié)

以上是生活随笔為你收集整理的JS中如何阻止事件的传播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

事件
js

上一篇： php strtok函数,strtok函
下一篇：机器学习实战：小麦种子（封装函数进行调参