关于什么是事件冒泡和如何取消事件冒泡的讨论！
Posted 巴黎的雨季
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于什么是事件冒泡和如何取消事件冒泡的讨论！相关的知识，希望对你有一定的参考价值。
在学习jQuery的过程中我们肯定会碰到这样一个问题，那就是事件冒泡，那么，何为事件冒泡呢？
事件冒泡通俗点讲就是，当你的子元素和父元素注册了同一个事件的时候，当你激活子元素的时候，父元素也会跟着被激活，
显然，这并不是我们所需要的结果！所以我们就要想办法取消事件冒泡
具体实例如下
<body>
<div id="mybigdiv">
我是大div
<div id="myid">我是小div</div>
</div>
</body>
在这里我的大div中嵌套了一个小的div，也就是说 大div有一个子集小div
在jQuery代码中
$(function () {
$("#myid").click(function () {
alert(‘我是子元素的单击事件‘);
//阻止事件冒泡
//stop();
});
$("#mybigdiv").click(function () {
alert(‘我是父级元素的单击事件‘);
});
});
我同时给大div和小div都注册了点击事件，此时阻止事件冒泡的代码是被注解掉的，那么此时我单击小div的时候会出现什么情况呢？
结果是 会先弹出 我是子元素的单击事件 紧接着 会弹出 我是父级元素的单击事件 这样的结果是我们不希望看到的，因为这造成了事件冒泡
所以我的解决方案如下 声明一个阻止事件冒泡的函数 stop() 具体内容如下
//解决事件冒泡的方法
function stop() {
//判定浏览器引擎是IE还是其他浏览器
event = event || window.event;
if (event.stopPropagation) {
//非IE浏览器
event.stopPropagation();
} else {
//IE浏览器
event.cancelBubble = true;
}
}
然后在子元素的单击事件里调用这个函数即可解决事件冒泡问题了！
以上是关于关于什么是事件冒泡和如何取消事件冒泡的讨论！的主要内容，如果未能解决你的问题，请参考以下文章