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

最新推荐文章于 2024-04-28 15:04:45 发布

本心_

最新推荐文章于 2024-04-28 15:04:45 发布

阅读量309

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_40571331/article/details/115361470

版权

JavaScript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<!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()
    }

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

本心_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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&l.
复制链接

扫一扫

专栏目录