是否有一种方法来判断事件是否在之前的冒泡阶段被处理

Question

在JS中，是否有一种方法可以告诉事件在到达currentTarget之前是否已经在先前的冒泡阶段处理?

我对这种行为的用例如下:

我正在制作一个网站，它的结构是一堆div s在彼此之上。它们都是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>

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

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

我想让它，如果用户点击其中一个部分，页面将自动滚动，使部分是完全对齐的页面的边界。

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

我不喜欢在先前发生的处理程序中设置一些变量。我也不想阻止事件一起冒泡，只是因为有许多类型的事件可能发生在一个部分，我不喜欢重复代码/调用相同的函数在一堆我的事件处理程序只是为了这个可以正确工作。

Answer 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();
});