.cancelBubble ——事件冒泡
一、基本信息
执行顺序:先是具体的,然后是一个个父级(如果有一个出去的事件触发了元素,元素就去执行这个函数,先是元素本身先执行)
事件冒泡机制描述: 当一个元素接收到事件的时候,会把他接收到的所有传给他的父级,一直到顶层window
var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); function fn1() { alert( this.id ); } oDiv1.onclick = fn1;//告诉div1,如果他接收到了一个点击事件,那么他就去执行fn1.弹出div1 oDiv2.onclick = fn1;//点击div2,弹出div2,div1。如果取消这行代码只是取消了事件函数的绑定,并没有取消点击事件 oDiv3.onclick = fn1;
//如果点击div3,会弹div3,div2,div1,因为冒泡,会把点击事件一直传递给父级。而且每个父级的点击事件都绑定了函数,所以都执行弹出。如果有的父级没有绑定事件则那个父级不弹出
<div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div>
二、方法
1、给元素oDiv1加事件处理函数,也叫事件函数的绑定
oDiv1.onclick = fn1;
2、阻止冒泡
方法:在当前要阻止冒泡的事件函数中写: 事件对象.cancelBubble = true;
注意:只能阻止当前对象的当前事件的冒泡
oBtn.onclick = function(ev) { var ev = ev || event; //事件对象的浏览器兼容 ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡 oDiv.style.display = 'block'; //只执行当前对象的点击事件,不执行父级的点击事件 }
三、技巧
1、如果很多元素都有相同的点击事件,只需要给这些元素共同的父级添加事件处理函数即可,因为有冒泡机制(见实例1)
四、实例
1、点击按钮显示,点击其他地方都隐藏div
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height:200px; border: 1px solid red; display: none;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev) { var ev = ev || event; //事件对象的浏览器兼容 ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡 oDiv.style.display = 'block'; } document.onclick = function() { oDiv.style.display = 'none'; //点击除了oBtn以外的元素都隐藏 } } </script> </head> <body> <input type="button" value="按钮" id="btn" /> <div id="div1"></div> <p>ppppp</p> <p>ppppp</p> <p>ppppp</p> <p>ppppp</p> </body> </html>
2、点击分享,从侧边弹出分享框
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;} #div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;} </style> <script> window.onload = function() { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { this.style.left = '0px'; //当鼠标移动到div1及子元素身上的时候,div1红框显示 } oDiv.onmouseout = function() { this.style.left = '-100px'; //当移出区域滑出屏幕 } } </script> </head> <body> <div id="div1"> <div id="div2">分享到</div> </div> </body> </html>