阻止事件冒泡的方法、event.stopPropagation()、阻止默认行为、event.preventDefault()

1、event.stopPropagation()

    <body>
      <form id="form1" runat="server">
        <div id="divOne" onclick="alert('我是最外层');">
          <div id="divTwo" onclick="alert('我是中间层!')">
            <a
              id="hr_three"
              href="http://www.baidu.com"
              mce_href="http://www.baidu.com"
              onclick="alert('我是最里层!')"
              >点击我</a
            >
          </div>
        </div>
      </form>
    </body>
  </body>
<script>
//上面点击会出现事件冒泡
document.getElementById("hr_three").onclick=function(event){
    
    
    event.stopPropagation(); 
    //阻止了事件冒泡,只有弹出自己的"我是最里层",然后链接到百度
    
}
</script>
event.stopPropagation();事件处理过程中,阻止了事件冒泡,
但不会阻击默认行为(它就执行了超链接的跳转)

联想记忆,将 阻止默认行为 接上方实例提一嘴

另外,补充return false和event.preventDefault()
代码修改如下:
在这里插入图片描述
2、在事件处理程序中删除按钮也能阻止事件冒泡。目标元素在文档中是事件冒泡的前提。

3、直接用事件委托不就行了,何必如此麻烦,不妨利用冒泡冒出去,在进行一个计较

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/121246861