详解javascript如何阻止冒泡事件及阻止默认事件

大家好，欢迎来到IT知识分享网。

- - 一、事件冒泡
  - 二、默认行为

在说事件冒泡之前，我们先说说事件对象（Event）

Event

1、在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）

2、所有浏览器都支持Event对象，但支持方式不同

3、IE中的事件对象：window.event

一、事件冒泡

什么是事件冒泡

即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点

所有浏览器都支持事件冒泡

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>事件冒泡</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> .one{ width:400px; height:100px; border:1px solid #333; } .two{ height:35px; line-height:35px; padding-left:15px; border:1px solid red; } .three{ padding:10px; background-color: green; border:1px solid #999; cursor:pointer; } </style> <script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script> <script> $(function(){ 
     $(".one").click(function(event) { 
     alert($(this).text()); }); $(".two").click(function(event) { 
     alert($(this).text()); }); $(".three").click(function(event) { 
     alert($(this).text()); }); }); </script> </head> <body> <div class="one"> 我是one(div) <p class="two"> 我是two（p） <span class="three">我是three（span）</span> </p> </div> </body> </html>

当在span、p、div元素上各绑定一个click事件，当单击span元素时，会依次触发三个事件，即span、p、div元素上的click事件，这就是事件冒泡，按照DOM层次结构像水泡一样不断向上直至顶端

阻止事件冒泡

DOM中提供stopPropagation()方法，但IE不支持，使用event 对象直接在事件函数中调用就行

IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用

阻止冒泡函数

function stopPropagation(e) { 
    e = e || window.event; if(e.stopPropagation) { //W3C 阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE 阻止冒泡方法 } } document.getElementById('need_hide').onclick = function(e) { 
    stopPropagation(e); }

jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

二、默认行为

什么是默认行为
网页元素，都有自己的默认行为，例如，单击超链接会跳转…

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行

IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用

阻止默认行为函数

function preventDefaultAction(e) { 
    e = e || window.event; if(e.preventDefault) { //W3C方法 e.preventDefault(); }else { //IE方法 e.returnValue = false; } }

jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用即可，即

event.preventDefault()

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>阻止事件冒泡和默认行为</title> </head> <style type="text/css"> .one { width: 200px; height: 200px; background: navajowhite; } .two { height: 40px; border: 1px solid red; background: white; line-height: 40px; } .three { cursor: pointer; /*padding: 10px;*/ background: red; } .defauleAction { width: 100px; height: 100px; border: 1px solid red; line-height: 100px; } .four { width: 200px; height: 200px; background: navajowhite; margin-top: 20px; } .five { height: 40px; border: 1px solid red; background: white; line-height: 40px; } .six { cursor: pointer; /*padding: 10px;*/ background: red; </style> <body> <div class="one">我是最外层 <p class="two">我是第二层 <span class="three">我是最里层</span> </p> </div> <!--阻止链接自动跳转的默认行为--> <div class="defaultAction"> <a href="https://blog.csdn.net/_">我的博客主页</a> </div> <!--同时阻止冒泡事件和默认行为--> <div class="four">我是最外层 <p class="five">我是第二层 <span class="six"><a href="https://blog.csdn.net/_">我是最里层</a></span> </p> </div> </body> <script type="text/javascript" src="../jQuery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ 
     $(".one").click(function(e) { 
     alert($(this).text()); }); $(".two").click(function(e) { 
     preventPropagation(e); alert($(this).text()); }); $(".three").click(function(e) { 
     /*一、先在最里层添加进阻止事件冒泡函数，再查看效果 *发现点击中间层的时候还是会冒泡到最外层 * 然后再中间层加入阻止函数，再查看效果 */ preventPropagation(e); alert($(this).text()); }); //阻止默认单击链接跳转行为 $(".defaultAction>a").click(function(e) { 
     preventDefaultAction(e); alert("链接不跳转了吧！"); }); //阻止事件冒泡函数 function preventPropagation(e) { 
     e = e||window.event; if(e.stopPropagation) { //W3C方法 e.stopPropagation(); }else { //IE方法 e.cancelBubble = true; } } //阻止默认行为函数 function preventDefaultAction(e) { 
     e = e || window.event; if(e.preventDefault) { //W3C方法 e.preventDefault(); }else { //IE方法 e.returnValue = false; } } //同时阻止默认行为和事件冒泡 $(".six").click(function() { 
     alert("点我之后既不向上冒泡又不跳转到默认的链接"); //要想同时阻止默认行为和事件冒泡，只需要返回return false就可以了 return false; }); $(".five").click(function(e) { 
     preventPropagation(e); alert("我是中间层"); }); $(".four").click(function() { 
     alert("我是最外层"); }); }); </script> </html>

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/137789.html

详解javascript如何阻止冒泡事件及阻止默认事件

一、事件冒泡

二、默认行为

相关推荐

发表回复