首页 > JQuery中事件冒泡是默认的吗~?

JQuery中事件冒泡是默认的吗~?

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


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


文本弹一次是正常的,不知道你对这个有什么疑问?
你要把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 clickeda clicked

【热门文章】
【热门文章】