event.stopPropagation() event.preventDefault() return false的区别以及阻止事件冒泡的兼容方法

关于前端的事件冒泡一直是困扰着接触不就的 js 人，当然一些大神级别的可以绕道，但不免也有些困扰的 old 程序员，在项目中经常会遇到些，正好今天想起来了，就总结一下，希望对大家有所帮助。

什么是事件冒泡

在一个对象上触发某类事件（比如单击 onclick 事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回 true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 document 对象（有些浏览器是 window）。

打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。

需要注意什么

事件捕获其实有三种方式，事件冒泡只是其中的一种：

（1）IE 从里到外（inside→outside）的冒泡型事件。

（2）Netscape4.0 从外到里（outside→inside）的捕获型事件。

（3）DOM 事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如 Netscape4.0 采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外 DOM 事件流还支持文本节点事件冒泡。

事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在 IE6 中 HTML 是接收事件冒泡的，另外大部分浏览器将冒泡延续到 window 对象，即……body→documen→window。

阻止冒泡并不能阻止对象默认行为。比如 submit 按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

阻止事件冒泡

通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。所以必要时，我们要阻止事件冒泡。

event.stopPropagation()方法

这是阻止事件的冒泡方法，不让事件向 documen 上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，

event.preventDefault()方法

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；

return false 方法

这个方法比较暴力，他会同时阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为 returnfalse 就等于同时调用了 event.stopPropagation()和 event.preventDefault()

为了方便大家理解，我写了几个小的例子，结合着一起来看一下。

HTML 代码：

<div class="mybj">  
    <a href="https://mybj123.com" target="_blank" rel="noopener noreferrer">码云笔记</a>  
</div>

以上代码是 div 里面套了一个 a 标签，连接到前端博客-码云笔记。

Css 代码：

.mybj{  
   height: 200px;  
   width: 600px;  
   margin: 0 auto;  
}  
.mybj a{  
   display: block;  
   height: 50%;  
   width: 50%;  
   background：red;  
}

css 代码，a 标签占父元素的空间的 1/4，背景颜色为红色；

下面一起来看看 js 代码：

一、不阻止事件冒泡和默认事件

$(".mybj").click(function(){  
      console.log("1")//不阻止事件冒泡会打印 1，页面跳转;               
}); 

二、阻止冒泡

$(".mybj a").click(function(event){  
     event.stopPropagation();//不会打印 1，但是页面会跳转；              
});  
              
$(".mybj").click(function(){  
    console.log("1")                  
});

三、阻止默认事件

$(".mybj a").click(function(event){           
     //阻止默认事件  
     event.preventDefault();//页面不会跳转，但是会打印出 1，  
})；  
              
$(".mybj").click(function(){  
     console.log("1")；                 
});

四、阻止冒泡对比阻止默认事件

$(".mybj").click(function(){  
     console.log("1")  
});           
//阻止冒泡  
$(".mybj a").click(function(event){  
     event.stopPropagation();              
     //阻止默认事件  
     event.preventDefault() //页面不会跳转，也不会打印出 1  
})

五、return false

$(".mybj").click(function(){  
     console.log("1")                  
});                                   
$(".mybj a").click(function(event){  
     return false;  //页面不会跳转，也不会打印出 1，等于同时调用了 event.stopPropagation()和       
     event.preventDefault()  
});

下面分享一个兼容常用的三种浏览器阻止事件冒泡的方法。希望能帮到大家。

注意：方法的使用有一点特殊【注意使用】

首先分享方法，将下面代码直接复制到公共 JS 文件即可、或者放在页面的 script 之中

Javascript 代码：

function preventBubble(event){  
  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的 e 改为 event，IE 运行可以，但是其他浏览器就不兼容  
  if (e && e.stopPropagation) {  
    e.stopPropagation();  
  } else if (window.event) {  
    window.event.cancelBubble = true;  
  }  
}

在哪个位置需要阻止事件冒泡，就在哪使用上面的方法：使用方法是：

preventBubble();

注意：这里调用方法（）中间千万不要填写 event，不填写即可。

自己保存一下，以便以后查找，感谢阅读！

以上关于event.stopPropagation() event.preventDefault() return false的区别以及阻止事件冒泡的兼容方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。