<div id="div1">
<div id="div2">
<input type="button" value="按钮"/>
</div>
</div>
$(function(){
$("div1").click(function(){
alert("DIV1");
});
$("div2").click(function(){
alert("DIV2");
});
$(":button").click(function(){
alert("按钮");
});
});
如果点击按钮将会依次触发3个事件:按钮点击事件=>div2点击事件=>div1点击事件
解决办法:
$(function(){
$("div1").click(function(event){
if(event.target==this){
}else{
alert("DIV1");
}
});
$("div2").click(function(event){
if(event.target==this){
}else{
alert("DIV2");
}
});
$(":button").click(function(){
alert("按钮");
});
});
这时点击按钮将只触发按钮的点击事件
另一种解决办法:
$("#div1").click(function (event) {
alert("DIV1");
});
$("#div2").click(function () {
alert("DIV2");
});
$(":button").click(function (event) {
alert("按钮");
event.stopPropagation();
});
该方法可以完全阻止事件冒泡。与.target类似,这个方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。不过,只要我们通过jQuery来注册所有的事件处理程序