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 clicked
和a clicked
。