JS阻止事件冒泡event.stopPropagation与阻止默认事件event.preventDefault 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="div">
    <a href="http://www.baidu.com" id="a">go to baidu</a>
  </div>
  <script>
    document.getElementById('div').onclick = function() {
      alert('冒泡')
    }
    document.getElementById('a').onclick = function(event) {
     
    }

  </script>
</body>
</html>

以上代码中，html结构非常简单，仅仅是一个到达百度的链接，外面套一层div，JS声明两个点击方法，一个监听a标签，一个监听div

正常情况下，当我们点击a标签时，网页会到达百度，同时触发监听a标签的点击方法，之后事件往外层冒泡，再触发监听外层的点击方法

情况一：

添加event.stopPropagation到a标签的点击方法

    document.getElementById('a').onclick = function(event) {
      event.stopPropagation()
    }

‘冒泡’弹窗不再出现

情况二：

添加event.preventDefault到a标签的点击方法

    document.getElementById('a').onclick = function(event) {
      event.preventDefault()
    }

阻止了链接跳转，事件正常往外冒泡，‘冒泡’弹窗出现

情况三：

同时添加event.preventDefault、event.stopPropagation到a标签的点击方法

    document.getElementById('a').onclick = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }

什么事都没有发生，既阻止链接跳转，也阻止事件冒泡

 

posted @ 2021-03-31 21:40  JonnyOu1012  阅读(98)  评论(0)  编辑  收藏  举报