有没有办法判断一个事件是否在之前的冒泡阶段被处理过？答案

【问题标题】：Is there a way to tell if an event has been handled in a previous bubbling phase?有没有办法判断一个事件是否在之前的冒泡阶段被处理过？
【发布时间】：2015-08-03 00:38:08
【问题描述】：

在 JS 中，有没有办法判断一个事件在到达 currentTarget 之前是否已经在之前的冒泡阶段处理过？

我对此行为的用例如下：

我正在制作一个网站，该网站的结构是一堆divs 相互叠加。它们都至少是100vh。有点像这样：

div {
  width: 100vw;
  height: 100vh;
}
div:first-child {
  background-color: yellow;
}
div:nth-child(2) {
  background-color: purple;
}
div:nth-child(3) {
  background-color: green;
}

<div></div>
<div></div>
<div></div>

在我的应用程序中，有一个菜单会自动滚动到与菜单项对应的divs。这一切都很好。

当用户不使用菜单，而是手动滚动页面时，问题就出现了。发生这种情况时，很难使用鼠标滚轮使该部分与页面的顶部和底部完美对齐。以这个 sn-p 为例，进入全屏模式，您可能会注意到仅使用鼠标滚轮不可能将紫色的div 完美排列。（我猜取决于你的鼠标）

我想要它，这样如果用户在其中一个部分内单击，页面将自动滚动，以便该部分与页面的边框完全对齐。

这里需要注意的是，如果事件在之前的某个冒泡阶段未由其他处理程序处理，我只想这样做。例如，如果用户单击该部分内的按钮，则自动对焦的处理程序需要能够检测到这一点并决定不执行该操作。

我不想诉诸于在较早出现的处理程序中设置一些变量。我也不想阻止事件一起冒泡，只是因为在一个部分中可能发生多种类型的事件，我不想在一大堆事件处理程序中重复代码/调用相同的函数，所以这个一个可以正常工作。

【问题讨论】：

标签： javascript events event-handling dom-events event-bubbling

【解决方案1】：

默认情况下，除非您在嵌套元素的处理程序中明确stopPropagation，否则您的点击事件可能会冒泡到父元素。

如果您使用的是 jQuery 之类的库，则只需几行代码即可停止多个元素的传播。

HTML：

<div class="primary">
    <a href="#">Stop propagation!</a>
    <button>Also stop propagation!</button>
</div>

JS：

$('.primary').on('click', function() {
    alert('primary clicked!');
});

$('.primary a, .primary button').on('click', function(e) {
    alert('stop propagation');
    e.stopPropagation();
});

【讨论】：