Question

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

我对此行为的使用案例如下：

我正在建立一个网站，其结构为一堆div在彼此之上。它们都是100vh的最小值。有点像这样：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

当问题出现时，用户只需手动滚动页面，而不是使用菜单。当发生这种情况时，很难让该部分使用鼠标滚轮与页面的顶部和底部完美对齐。以此片段为例，进入全屏幕，您可能会注意到仅使用鼠标滚轮就无法完美地排列紫色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();
});

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

1 个答案: