当前位置：文江博客话题详情

JQuery中事件冒泡是默认的吗～？

发布于 2022-09-02 12:22:17 字数 85 浏览 19 评论 0

jquery中提供了阻止时间冒泡的方法，但比如div中有个a标签，我设置了单击a标签后弹出文本，并没有添加阻止冒泡的方法，但是文本只弹出了一次，这是为什么？

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧时光的容颜 2022-09-09 12:22:17

你还没有完全理解事件冒泡！
定义：在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
如果你设置了事件处理程序，当然不会再继续冒泡了！

回复收藏 0

向地狱狂奔 2022-09-09 12:22:17

文本弹一次是正常的，不知道你对这个有什么疑问？
你要把DOM当成一个倒转过来的“树”，当你点击a标签并且在其中附加了事件处理程序，则会触发其执行。当执行完毕并且你没有添加阻止事件冒泡的语句，事件会继续往上传播，直到到“树”根（document）

// W3C
e.stopPropagation();

// IE
e.cancelBubble = true;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: red;
    }
    
    a {
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <a href="#">Test</a>
  </div>
</body>
</html>

document
  .querySelector('div')
  .addEventListener('click', function() {
  alert('div clicked')
}, false)

document
  .querySelector('a')
  .addEventListener('click', function() {
  alert('a clicked')
})

点击Test，弹出依次弹出div clicked和a clicked。

回复收藏 0

~没有更多了~