jquery阻止事件冒泡

时间 2019-11-18

原文原文链接

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

对于这样的文档流咱们加上事件 spa

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

当点击a的内容的时候会分别弹出我是a,我是p 我是div code

这就是事件冒泡，可是咱们但愿的是当点击a的时候只弹出"我是a"，因此咱们要阻止事件冒泡事件

解决方案就是对在每一次事件执行后阻止事件的继续执行文档

在js里面用preventDefault()和stopPropagation()方法 io

preventDefault()取消事件的默认行为若是cancelable为true则能够使用这个方法 event

stopPropagation()取消事件的进一步捕获或冒泡,若是bubbles为true，则能够使用这个方法 function

$(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();//阻止事件冒泡 class