JS点击子元素不触发父元素点击事件(js阻止冒泡)
2014-12-31 11:06
701 查看
js阻止冒泡
<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer} .divchild{position: absolute;margin:10px;width:50px;height:50px;background:white;cursor: pointer} </style> <script type="text/javascript"> function divone(){ //这里是divone事件的代码 console.log('divone事件'); stopPropagation(); } function divchild(){ //这里是divchild事件的代码 console.log('divchild事件'); stopPropagation(); } function stopPropagation(e) { e = e || window.event; if(e.stopPropagation) { //W3C阻止冒泡方法 e.stopPropagation(); } else { e.cancelBubble = true; //IE阻止冒泡方法 } } </script> </head> <body> <div class="divone" onclick="divone(this)"> <div class="divchild" onclick="divchild(this)"></div> </div> </body> </html>
相关文章推荐
- js实现冒泡事件,点击ul给子标签添加相同事件和阻止冒泡事件
- 原生JS如何利用冒泡减少事件的触发,只代理给共有的父元素。
- 解决/阻止 div层内的div层点击事件冒泡触发的小方法
- js利用事件的阻止冒泡实现点击空白模态框的隐藏
- js利用事件的阻止冒泡实现点击空白模态框的隐藏
- 事件委托与阻止冒泡阻止其父元素事件触发
- 【js】js阻止元素事件的冒泡
- JS生成DOM元素点击事件不生效和点击事件禁止冒泡处理方式
- 阻止默认行为:比如a链接的跳转。阻止冒泡:子元素的事件触发到了父元素身上
- 阻止点击事件冒泡,不让父级元素的点击事件响应
- 事件委托与阻止冒泡阻止其父元素事件触发
- js阻止元素的默认事件与冒泡事件
- Js阻止事件冒泡 弹出层后点击body区域层消失
- js 阻止元素(文档)默认事件,阻止冒泡事件
- 父级元素触发子元素的 click 事件,阻止子元素事件冒泡
- JS 防止父元素事件冒泡触发
- js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)
- js 兼容阻止事件冒泡stopPropagation
- JS循环网页元素,手动触发事件
- js获取触发事件元素的坐标