关于什么是事件冒泡和如何取消事件冒泡的讨论!
在学习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;
}
}
然后在子元素的单击事件里调用这个函数即可解决事件冒泡问题了!