1、事件冒泡的由来！
事件发生需要有事件源，即引发这个事件的对象。
事件发生后，事件源本身没有处理事件的能力，如：我们给div添加一个点击事件，但div本身并不能处理这个事件，事件必须传播，达到能够处理本事件的代码中。就是要找到处理该div点击事件的函数。
事件冒泡：就是通过事件冒泡找到找到处理点击事件的函数。事件冒泡是根据DOM中的对象树，以此向上查找。如果父节点有执行该点击事件的函数或可执行的语句，就执行函数或语句；然后事件继续向上传播，类似查找到爷倍节点等等。
2、阻止事件冒泡事例
<body>
<div class="one" style="width:200px;height:200px;background:green;">
<div class="two" style="width:150px;height:150px;background:yellow;">
<div class="three" style="width: 100px;height: 100px;background: lightblue;">
<a href="http://www.baidu.com">点击进入百度</a>
</div>
</div>
</div>
</body>
(1)、通过stopPropagation()方法只阻止一个事件冒泡
$('.three').click(function(e){
alert('four');
//阻止起泡
e.stopPropagation();
});
(2)、通过preventDefault()方法取消默认行为
$('.three').click(function(e){
alert('three');
//阻止默认事件
e.preventDefault();
});
(3)、通过返回false取消默认行为和阻止事件冒泡
$('.three').click(function(e){
alert('three');
//阻止默认事件和阻止冒泡
return false;
});
3、总结；
stopPropagation()方法阻止事件冒泡；
preventDefault()方法阻止默认事件；
return false;阻止默认行为和阻止事件冒泡；
0
1230博客
热门推荐：