js 阻止冒泡

作者：自然ㄣ之光发布日期:2026-03-22 浏览:20

// 示例代码：阻止事件冒泡

// HTML 结构
/*
<div id="outer">
  <div id="inner">点击我</div>
</div>
*/

// JavaScript 代码
document.getElementById('inner').addEventListener('click', function(event) {
  // 阻止事件冒泡
  event.stopPropagation();

  console.log('内层 div 被点击');
});

document.getElementById('outer').addEventListener('click', function() {
  console.log('外层 div 被点击');
});

解释说明：

事件冒泡：当一个元素上的事件被触发时，该事件会从这个元素开始向上传播到其父级元素，直到最顶层的 document。这就是所谓的“事件冒泡”。
event.stopPropagation()：此方法用于阻止事件继续向上传播（即阻止冒泡）。在上面的例子中，当我们点击 inner 元素时，事件不会传播到 outer 元素，因此只会触发 inner 的点击事件，而不会触发 outer 的点击事件。

上一篇：pdf.js demo

下一篇：js 防止冒泡