jquery阻止事件冒泡

<div di="div">我是div1
<p id="p"><a id="a">我是a</a>我是p</p>
</div>

對於這樣的文檔流咱們加上事件

$(document).ready(function){
    $("#div").click(function(){
    alert("我是DIV");
})
$("#p").click(function(){
alert("我是p")
})
$("#a").click(function(){
alert("我是a");
})
}

當點擊a的內容的時候會分別彈出  我是a,我是p 我是div

這就是事件冒泡，可是咱們但願的是當點擊a的時候只彈出"我是a"，因此咱們要阻止事件冒泡

解決方案就是對在每一次事件執行後阻止事件的繼續執行

在js裏面用preventDefault()和stopPropagation()方法

preventDefault()取消事件的默認行爲若是cancelable爲true則能夠使用這個方法

stopPropagation()取消事件的進一步捕獲或冒泡,若是bubbles爲true，則能夠使用這個方法

$(document).ready(function){
    $("#div").click(function(event){
    alert("我是DIV");
event.stopPropagation();//阻止事件冒泡
})
$("#p").click(function(){
alert("我是p")
event.stopPropagation();//阻止事件冒泡
})
$("#a").click(function(){
alert("我是a");
event.stopPropagation();//阻止事件冒泡
})

固然也能夠把使用return false，來阻止事件冒泡，可是最好不要這樣，咱們仍是適合取消事件的默認行爲用

event.preventDefault();//阻止事件冒泡