js阻止冒泡事件-2
2017-08-05 12:36
253 查看
<!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() { // 给按钮和文档添加点击事件。点击按钮div隐藏,点击document则div显示--就会发现无论当你怎么点击div也不会显示出来,是因为事件的冒泡机制 //冒泡的好处:举一个例子 假如给按钮添加点击事件使div隐藏。给页面中除了该按钮的其他元素添加点击事件使div显示。那么问题来了,我们要给那么多的元素添加事件会造成好多麻烦。冒泡的机制可以让我们点击某个元素后触发其父级(父级、父父级等上级)的事件,我们只需要给顶级事件document加上对应事件的处理函数后无论你点击除了Btn元素的其他元素都能触发事件使div隐藏。当给Btn添加事件的时候我们只需将其事件冒泡阻止则不会传递到父级而产生事件的响应 /* 阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; 冒泡事件只能单独去阻止 */ var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev) { var ev = ev || event; //调用事件对象的属性 ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡(即执行的oBtn的点击冒泡而不执行其他事件的冒泡--也就是说其他事件的冒泡还会执行) oDiv.style.display = 'block'; } /*oBtn.onmouseover = function(ev) { var ev = ev || event; ev.cancelBubble = true; }*/ //点击p标签--p标签会产生点击的动作但是没有点击事件--冒泡传递事件给上级--document接收到点击事件后执行相应的事件处理函数 document.onclick = function() { //延迟1秒中显示div /*setTimeout(function() { oDiv.style.display = 'none'; }, 1000);*/ oDiv.style.display = 'none'; } } </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>
相关文章推荐
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- [Js]阻止事件冒泡
- JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
- JS阻止冒泡事件以及默认事件发生的简单方法
- js阻止冒泡事件及默认操作
- [转] js 事件冒泡 阻止
- JS实现阻止冒泡事件
- js利用事件的阻止冒泡实现点击空白模态框的隐藏
- Js阻止事件冒泡和document.onclick在IE浏览器上无效
- jquery与js阻止事件冒泡
- js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
- js 阻止元素(文档)默认事件,阻止冒泡事件
- js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false
- JS DOM操作 函数 事件 阻止事件冒泡
- js 停止事件冒泡和阻止浏览器默认事件
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js基础特效04阻止事件冒泡及封装及获取事件目标
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
- js 兼容阻止事件冒泡stopPropagation
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )