防止事件冒泡
首先我们要知道的前提是当任何的元素发生事件时,事件处理机制首先会检查该元素是否附加了事件方法(以及事件处理函数)。如果是,就执行(附加的事件方法的)事件处理函数的语句。在此之后,事件处理机制继续检查该元素的亲节点,看是否附加了事件方法,如果是,也会执行事件处理函数。继续检查其亲元素(即亲元素的亲元素),如此类推,换句话说,事件冒泡指的是被触发事件在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来判断点击事件作用于哪一个元素,最终的效果是可以防止冒泡事件的发生。