JS阻止冒泡方法(转)

S事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。

　　我在文档中写了一个层，<div id="need_hide">点击以外隐藏该层</div>，并为之设置了简单的样式，现在我希望点击该层以外的地方使之隐藏，那么我给根元素绑定了一个click事件，一点击html就隐藏该DIV，代码如下：

1 document.documentElement.onclick = function() {
2     document.getElementById('need_hide').style.display = 'none';
3 }

但是点击该层后，也使之隐藏了，这不是我希望得到的效果。由于该层属于根元素的子节点，所以它也被绑定了这个click事件，那么需在该元素被click时阻止冒泡事件的发生，加上以下代码：

 1 function stopPropagation(e) {
 2     e = e || window.event;
 3     if(e.stopPropagation) { //W3C阻止冒泡方法
 4         e.stopPropagation();
 5     } else {
 6         e.cancelBubble = true; //IE阻止冒泡方法
 7     }
 8 }
 9 document.getElementById('need_hide').onclick = function(e) {
10     stopPropagation(e);
11 }

如果还想增加一个链接：<a href="#" id="btn_show">显示层</a>，用它来控制该层显示出来，那么仍然需要在该链接被点击时阻止冒泡事件的发生，加上以下代码：

1 document.getElementById('btn_show').onclick = function(e) {
2     document.getElementById('need_hide').style.display = 'block';
3     stopPropagation(e);
4 }

转载于:https://www.cnblogs.com/xingmeng/p/3830879.html

JS阻止冒泡方法(转)相关推荐

js阻止冒泡的方式-完整版
js阻止冒泡的方式-完整版直接讲结论: 1.原生js 两种方式绑定事件 onclick 和 addEventListener 阻止冒泡的唯一方式为 var e = window.event || a ...
JS阻止冒泡和取消默认事件(默认行为)
阻止事件冒泡 function stopPropagat(e) {if (e && e.stopPropagation) {e.stopPropagation();//标准浏览器} e ...
JS阻止冒泡和元素默认事件
JS阻止冒泡和元素默认事件文章目录 JS阻止冒泡和元素默认事件 1.JS阻止冒泡 :stopPropagation() 2.阻止元素默认事件行为 preventDefault() onclick + ...
关于js阻止冒泡时的一些坑
前提:这两天在用datatable做列表,点击列表行显示详情,就会涉及到阻止冒泡的问题,话不多说直接上代码,大概思路就是先获取到事件,然后阻止它. //得到事件 function getEvent() ...
js阻止冒泡，兼容写法。
有几次遇到a链接里面包含click点击方法,这时候会触发click事件,还会触发a链接跳转.这时候就需要阻止冒泡了. 添加 event.stopPropagation(); 就可以了.在chrome上 ...
Javascript阻止冒泡方法
阻止冒泡的方法 w3c的方法:(火狐.谷歌.IE11) event.stopPropagation() IE10以下则是: event.cancelBubble= true
js阻止冒泡事件和默认事件
event.stopPropagation();这个event要通过参数传递过来,不然可能有的浏览器(比如火狐)不能识别event 要像这么写: οnclick="init.toggleUs ...
JS 阻止冒泡阻止默认
1.什么是事件冒泡? 事件冒泡是指事件由子级传向父级,事件冒泡常常会使事件按照不属于我们原本的方式进行,影响我们正常处理事件的流程. 下边的代码通过控制台可以看出事件冒泡的流程. <body ...
js阻止冒泡的两种方法
冒泡是一种很有意思的现象,在我们的 js 中也有冒泡现象,让我们一起去看看吧先来看一段代码 <!DOCTYPE html> <html><head><met ...

JS阻止冒泡方法(转)

JS阻止冒泡方法(转)相关推荐

最新文章

热门文章