e.preventDefault() 是用来阻止默认事件的,不是阻止事件冒泡 ;事件冒泡应该是 e.stopPropagation()

发布时间 2023-11-13 00:26:37作者: 龙陌

假设DOM结构为:

JS代码为:
document.getElementById('a').addEventListener('click', e => {console.log(1)});
document.getElementById('b').addEventListener('click', e => {e.preventDefault();console.log(2)});

当点击id为b的div时,控制台输出的内容是:

2
1

e.preventDefault() 是用来阻止默认事件的,不是阻止事件冒泡

事件冒泡应该是 e.stopPropagation()

几个常见的事件的方法

preventDefault() 取消事件默认行为,如阻止点击提交按钮时对表单的提交(本题中click并没有什么默认行为)

stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用,影响当前的事件***

stopPropagation() 取消事件冒泡,不影响事件***

cancelBubbe() 取消事件冒泡

returnValue() 取消事件默认行为