一、冒泡事件简介
当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。
方法一:event.stopPropagation( );
例如:
<div>
<p>段落文本内容
<input type="button" value="点击" />
</p>
</div>
html代码:
// 为所有div元素绑定click事件
$("div").click( function(event){
alert("div-click");
} );
//为所有p元素绑定click事件
$("p").click( function(event){
alert("p-click");
} );
//为所有button元素绑定click事件
$(":button").click( function(event){
alert("button-click");
// 阻止事件冒泡到DOM树上
event.stopPropagation(); // 只执行button的click,如果注释掉该行,将执行button、p和div的click
} );
方法二:event.target
eventevent.targetDOM
APIjQuery.targetDOMthisDOM
$(document).ready(function(){
$('#switcher').click(function(event){
$('#switcher .button').toggleClass('hidden');
})
})
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target==this){
$('#switcher .button').toggleClass('hidden');
}
})
})
<div id="switcher"> 。