防止事件冒泡
首先我们要知道的前提是当任何的元素发生事件时，事件处理机制首先会检查该元素是否附加了事件方法（以及事件处理函数）。如果是，就执行（附加的事件方法的）事件处理函数的语句。在此之后，事件处理机制继续检查该元素的亲节点，看是否附加了事件方法，如果是，也会执行事件处理函数。继续检查其亲元素（即亲元素的亲元素），如此类推，换句话说，事件冒泡指的是被触发事件在DOM中向上传播直到DOM的根过程。
所以如果我们对子节点进行事件触发的时候，如果其亲节点上也有事件处理函数，那么亲节点上的事件也是会触发的。这样子显然不是我们想要的，所以我们应该防止事件冒泡，那我们应该怎么防止冒泡事件呢？
先来举个例子：
<body>
<div>aaaaaaaaaa
<p>bbbbbbbb
<span>cccccccc</span>
</p>
</div>
</body>
以下是jQuery代码
$(document).ready(function(){
$(‘div’).click(function(){
alert(“aaaaaaaa”);
});
$(‘p’).click(function(){
alert(“bbbbbbbb”);
});
$(‘span’).click(function(){
alert(“cccccccc”);
});
});显然这样子出现的效果是，如果我们点击<span>，就会弹出一个对话框内容为ccccccccc,但是当我们关闭这个对话框的时候，又弹出了内容为bbbbbbbb的对话框。当我们关闭的这个对话框的时候，又弹出了内容为cccccccc的对话框。因为span元素在p元素的子元素，所以p元素的函数也会被触发,如此类推。我们应该如何做才能让它只弹出我们想要的对话框呢？
在这里我们应用事件对象target来控制事件的传播，并停止事件冒泡。利用target属性，可以确定哪个DOM元素首先接受到事件，并确保该事件不会自动传播到其亲元素。target属性其实是表示产生事件的引用，就是事件的产生者。
接下来我们修改的代码是：
$(document).ready(function(){
$(‘div’).click(function(e){
var $target=$(e.target);
if($target=="div"){
alert(“aaaaaaaa”);
}
});
$(‘p’).click(function(e){
var $target=$('e.target');
if($target=="p"){
alert(“bbbbbbbb”);
}
});
$(‘span’).click(function(e){
var $target=$(e.target);
if($target=="span"){
alert(“cccccccc”);
}
});
});这样子我们就可以确定如果触发事件的引用是当前处理事件的引用，其实当前处理事件的引用也是可以使用$(e.currentTarget)来获得的，然后我们将触发事件的引用存储在变量$target中。接着用if来判断点击事件作用于哪一个元素，最终的效果是可以防止冒泡事件的发生。
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
