这篇文章主要讲解Js中阻止事件冒泡，阻止默认事件的方法，理解stopPropagation()，preventDefault()，return false的区别。
1.event.stopPropagation()方法
event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。
提示：请使用 event.isPropagationStopped() 方法来检查指定的事件上是否调用了该方法。
2.event.preventDefault()方法
取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如：
form表单如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。
a元素中href连接，如果调用此方法是，连接不会被打开。
注意
1、如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
2、该方法会发生冒泡，冒泡会传递到上一层的父元素。
3.return false；
这个方法比较暴力，他会同事阻止事件冒泡也会阻止默认事件；写上此代码，连接不会被打开，事件也不会传递到上一层的父元素；可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
4.实例讲解
这是html代码，在div里面套了一个a标签，连接到fly63前端网。
<div id="box">
<a id="box_1" href="http://www.shenqiku.cn">fly63前端网</a>
</div>第一种：不阻止事件冒泡和默认事件
document.getElementById('box').onclick=function(e){
console.log("1");//不阻止事件冒泡会打印1，页面跳转;
}第二种：阻止默认事件
document.getElementById('box').onclick=function(e){
console.log("1");
}
document.getElementById('box_1').onclick=function(e){
e.preventDefault();//阻止默认事件
}我们会发现阻止了默认事件，点击a标签页面不会跳转，但是会打印出1。说明e.preventDefault()只能阻止默认动作，但是冒泡仍然会发生。
第三种：阻止事件冒泡
document.getElementById('box').onclick=function(e){
console.log("1");
}
document.getElementById('box_1').onclick=function(e){
e.stopPropagation();//阻止事件冒泡
}点击a标签，页面会跳转到fly63前端网，但是在控制台中是没有打印“1”的。
第三种：阻止事件冒泡和默认事件
document.getElementById('box').onclick=function(e){
console.log("1");
}
document.getElementById('box_1').onclick=function(e){
e.stopPropagation();
e.preventDefault();//阻止默认事件
}等同于
document.getElementById('box_1').onclick=function(e){
return false;
}页面不会跳转，也不会打印出1。这里return false;等于同时调用了event.stopPropagation()和event.preventDefault()。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！