当在一个DOM上，绑定的事件中阻止了冒泡/捕获，那么这个DOM上其他绑定的事件都不会冒泡/捕获了

在线演示

https://jsbin.com/dopohayohu/7/edit?html,css,js,output

关于DOM事件，阻止冒泡/捕获的冷知识 - 图1

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width">
  6.     <title>JS Bin</title>
  7.   </head>
  8.   <body>
  9.     <div class="out">
  10.       <div class="inner"></div>
  11.     </div>
  12.   </body>
  13. </html>
  1. .out {
  2.   width: 200px;
  3.   height: 200px;
  4.   background: red;
  5. }
  7. .inner {
  8.   width: 100px;
  9.   height: 100px;
  10.   background: green;
  11. }
  1. document.querySelector('.out').addEventListener('click', (event) => {
  2.   console.log('out')
  3. })
  5. // document.querySelector('.inner').addEventListener('click', (event) => {
  6. //   event.stopPropagation()
  7. //   console.log('inner')
  8. // })
  10. document.querySelector('.inner').addEventListener('click', (event) => {
  11.   console.log('inner0')
  12. })
  14. document.querySelector('.inner').addEventListener('click', (event) => {
  15.   console.log('inner1')
  16. })
  18. document.querySelector('.inner').addEventListener('click', (event) => {
  19.   console.log('inner2')
  20. })
  22. document.querySelector('.inner').addEventListener('click', (event) => {
  23.   event.stopPropagation()
  24.   console.log('inner')
  25. })

由来

根据MDN上的兼容性来看

  1. (function() {
  2.   if (!Event.prototype.preventDefault) {
  3.     Event.prototype.preventDefault=function() {
  4.       this.returnValue=false;
  5.     };
  6.   }
  7.   if (!Event.prototype.stopPropagation) {
  8.     Event.prototype.stopPropagation=function() {
  9.       // 将当前Event对象的cancelBubble设置为true，在执行完成所有绑定事件回调之后，判断是否冒泡/捕获时，根据此属性标志，不会做冒泡或者捕获处理。
  10.       this.cancelBubble=true;
  11.     };
  12.   }
  13.   if (!Element.prototype.addEventListener) {
  14.     var eventListeners=[];
  16.     var addEventListener=function(type,listener /*, useCapture (will be ignored) */) {
  17.       var self=this;
  18.       var wrapper=function(e) {
  19.         e.target=e.srcElement;
  20.         e.currentTarget=self;
  21.         if (typeof listener.handleEvent != 'undefined') {
  22.           listener.handleEvent(e);
  23.         } else {
  24.           listener.call(self,e);
  25.         }
  26.       };
  27.       if (type=="DOMContentLoaded") {
  28.         var wrapper2=function(e) {
  29.           if (document.readyState=="complete") {
  30.             wrapper(e);
  31.           }
  32.         };
  33.         document.attachEvent("onreadystatechange",wrapper2);
  34.         eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper2});
  36.         if (document.readyState=="complete") {
  37.           var e=new Event();
  38.           e.srcElement=window;
  39.           wrapper2(e);
  40.         }
  41.       } else {
  42.         this.attachEvent("on"+type,wrapper);
  43.         eventListeners.push({object:this,type:type,listener:listener,wrapper:wrapper});
  44.       }
  45.     };
  46.     var removeEventListener=function(type,listener /*, useCapture (will be ignored) */) {
  47.       var counter=0;
  48.       while (counter<eventListeners.length) {
  49.         var eventListener=eventListeners[counter];
  50.         if (eventListener.object==this && eventListener.type==type && eventListener.listener==listener) {
  51.           if (type=="DOMContentLoaded") {
  52.             this.detachEvent("onreadystatechange",eventListener.wrapper);
  53.           } else {
  54.             this.detachEvent("on"+type,eventListener.wrapper);
  55.           }
  56.           eventListeners.splice(counter, 1);
  57.           break;
  58.         }
  59.         ++counter;
  60.       }
  61.     };
  62.     Element.prototype.addEventListener=addEventListener;
  63.     Element.prototype.removeEventListener=removeEventListener;
  64.     if (HTMLDocument) {
  65.       HTMLDocument.prototype.addEventListener=addEventListener;
  66.       HTMLDocument.prototype.removeEventListener=removeEventListener;
  67.     }
  68.     if (Window) {
  69.       Window.prototype.addEventListener=addEventListener;
  70.       Window.prototype.removeEventListener=removeEventListener;
  71.     }
  72.   }
  73. })();

根据whatwg标准来看
https://dom.spec.whatwg.org/#ref-for-dom-event-stoppropagation

The stopPropagation() method steps are to set this’s stop propagation flag.

https://jsbin.com/rupokisogu/1/edit?js,output

只要绑定事件队列里面有一个执行了event.stopPropagation()，那么在执行完所有队列中的事件回调之后，不会冒泡或者捕获

结束