JavaScript中怎么捕捉事件和阻止冒泡事件

  
     
         Click Here
     

从上面的代码可以看出，div_1是div_2的容器，而div_2是a的容器，总共三层。

我们运行这个实例，点击Click Here会发现，分别弹出了三个alert提示框，而且顺序为I'm Third! 、I'm Second!、I'm First!，这就符合我们上面提到的冒泡的概念了。

而我这次碰到的问题就是这样，我称之为“事件重叠”。

出现这种情况，肯定不行，所以我们要阻止该事件冒泡的发生，那如何来阻止呢？下面将。

三、阻止事件冒泡的方法

首先我先给出一个纯JavaScript版的写法：

function aOnClick(e){
   window.event? window.event.cancelBubble = true : e.stopPropagation();
}

解释：因为IE里的阻止冒泡的写法为window.event.cancelBubble = true，其他浏览器为e.stopPropagation();所以这里做了兼容。

再给出一个jQuery版本的写法：

$(function() {
  $("#alink").click(function(event) {
    event.stopPropagation();
  });
});

四、阻止冒泡的其他方法及不同

我就是用上面的函数阻止了冒泡，但是还有其他的方法可以达到类似的效果，但还是有所不同；

$("#alink").click(function(event) {
  return false;
});

解释：上面方法使用jQuery对alink进行了操作，经过测试，得出结论，该函数阻止了冒泡，但是它将a的默认行为也屏蔽掉了(此处为href属性)。这就是不同之处。

顺便说下，javasccript的阻止默认行为的方法

event.preventDefault();

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。