js阻止事件冒泡方法

发布时间:2016-09-18 编辑:汤利军 阅读:

什么是事件冒泡?

  
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
  
JS事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失。在这个过程中,如果你只希望事件发生在目标元素,而不想它传播到祖先元素上去,那么你需要在“泡泡”离开对象之前刺破它。
  

如何阻止事件冒泡?

  
我在文档中写了一个层,<div id="div1">点击按钮显示该层、点击文档(除按钮外)隐藏该层,并为之设置了简单的样式,现在我希望点击该层以外的地方使之隐藏,那么我给文档绑定了一个click事件,一点击html就隐藏该DIV,代码如下:
js阻止事件冒泡方法代码一

但是点击显示显示按钮后、再点击文档其它地方,却无法隐藏div,这不是我想要的结果,解决方法有两种:
  
第一种:cancelBubble(IE阻止事件冒泡方法)
  
ev.cancelBubble=true;
  
第二种:if...else(W3C阻止事件冒泡方法)
  
if(ev.cancelBubble){ev.cancelBubble=true}  
else{ev.stopPropagation}{ev.stopPropagation()}






 

关注我

图文推荐

云标签

友链交换