日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

JS中如何阻止事件的传播

發(fā)布時間：2023/12/20 javascript 33 豆豆
生活随笔 收集整理的這篇文章主要介紹了 JS中如何阻止事件的传播 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

如果希望事件到某個節(jié)點為止，不再傳播，可以使用事件對象的stopPropagation方法。stopPropagation方法阻止事件在 DOM 中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)，但是不包括在當前節(jié)點上其他的事件監(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) {// 只能阻止這個事件的傳播，但是不能取消事件，后邊綁定的click監(jiān)聽函數(shù)可以正常觸發(fā)event.stopPropagation();console.log(1); });


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

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

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

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

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

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

總結(jié)

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

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