首页 > 代码库 > 理解阻止浏览器默认事件和事件冒泡cancelBubble
理解阻止浏览器默认事件和事件冒泡cancelBubble
一、阻止浏览器默认事件
1、先举个例子说什么是 浏览器的默认事件 ：
比如有一个输入框，当我按下字母a，就会在输入框显示字母a。就是浏览器本该发生的事情。小孩子一出生就会汲取母乳一样的道理，这些都是先天，默认好的了。
2、看个demo，阻止浏览器默认的右键弹出菜单，而且弹出自己自定义的菜单。代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style type="text/css"> #div1 { width:100px; height: 100px; list-style: none; background: #ccc; display: none; position: absolute; } </style> <script type="text/javascript"> /*在鼠标按下位置弹出菜单*/ window.oncontextmenu = function(evt) { var oDiv = document.getElementById(‘div1‘); var oEvt = evt || event; oDiv.style.display = ‘block‘; oDiv.style.left = oEvt.clientX +‘px‘; oDiv.style.top = oEvt.clientY +‘px‘; return false; //阻止浏览器默认事件 document.onclick=function () //当再点击时，设置div1为none { var oDiv=document.getElementById(‘div1‘); oDiv.style.display=‘none‘; }; } </script> </head> <body> <div id="div1"> <ul> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> <li>菜单一</li> </ul> </div> </body></html>
return false，阻止了浏览器默认事件，所以当右击鼠标右键时，不会弹出默认菜单， 而是弹出了我自定义的菜单，一个ul列表。
兼容：IE8+，chrome、FF
二、阻止事件冒泡cancelBubble=true
1、举个例子说明什么是事件冒泡
<div id=‘div‘ onclick=‘alert("div");‘><ul onclick=‘alert("ul");‘><li onclick=‘alert("li");‘>test</li></ul></div>
当我点击test的时候，先会弹出 li ->ul ->div。从下往上冒泡。就比如小鱼儿在海底冒泡，小泡泡从海底往海面冒泡，越来越大。html文档中最后的一个泡是document。
2、下面有个demo，我们经常用到的一个效果，显示/隐藏。当我一点击，div显示，在页面其他位置点击，div消失。以后是代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>仿select-事件冒泡</title> <style> #div1 { width:200px; height:200px; background:#CCC; display:none; } </style> <script> window.onload = function() { var oBtn = document.getElementById(‘btn1‘); var oDiv = document.getElementById(‘div1‘); /*当点击按钮，div显示，，点击其他地方div隐藏*/ oBtn.onclick = function(evt) { var oEvent = evt || event; //evt 兼容FF/chrome浏览器 div1.style.display = ‘block‘; oEvent.cancelBubble = true; //取消事件冒泡（否则点击按钮后，会冒泡到最后一层上即document） } document.onclick = function() { div1.style.display = ‘none‘; alert(‘document被点击‘); } } </script> </head><body><input type="button" value="点击我" id="btn1"><div id="div1"></div></body></html>
在需要取消冒泡的地方：加一句oEvent.cancelBubble = true
兼容：IE6，FF，chrome等
三、学习js不仅要知道怎么样，还有要处理浏览器兼容，我晕了，第一个例子没能兼容IE6，再搜搜。学习果然是一场修行
理解阻止浏览器默认事件和事件冒泡cancelBubble
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。