一、冒泡事件簡介

當我們點擊一個控件的時候，如果包括這個控件的父控件也有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 API jQuery.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"> 。

js阻止事件冒泡的兩種方法