如何反转Javascript元素冒泡顺序？

Question

我创建了一个自定义的Slider组件，除了一个问题之外，它都能正常工作。

如果它存在于模式中，则在它下面的所有事件（在z索引方向上）之前，在元素本身上都会对其触发mouseUp事件。

这是因为要拥有一个不错的滑块，您需要将mouseMove和mouseUp事件附加到文档而不是滑块本身，以便即使鼠标移开也可以移动拇指并捕获鼠标上移事件滑动滑块的同时滑动滑块。

结果，我现在遇到mouseUp事件导致其下面的元素的click事件在滑块元素之前运行的问题。这会导致问题，例如其下方的按钮单击和模式关闭（因为它们都是单击事件）。

[一种潜在的解决方案是仅对所有可能被拦截的潜在事件处理程序添加检查（类似于对所有其他元素的if (thisModalOpened) { return false; }，但是这种解决方案似乎有些混乱。

还有更好的方法吗？一种反转冒泡顺序的方法似乎可行，因为这样我就可以在Slider组件的stopPropagation中调用mouseUp。但是，我不确定是否可以这样做，因为当前事件侦听器已在文档中注册，以便可以在元素本身之外检测到它。

一些代码段：

componentDidMount() {
  document.addEventListener("pointermove", this.onThumbMove, false);
  document.addEventListener("pointerup", this.onThumbUp, false);
}

onThumbDown = e => {
  this.setState({ dragging: true, startX: this.getX(e) });
}

onThumbMove = e => {
  if (this.state.dragging) {
    this.setState({ position: e.clientX });
  }
}

onThumbUp = e => {
  if (this.state.dragging) {
    let value = this.getValue();

    this.setState({ dragging: false }, () =>
      this.props.onSubmit(value);
    });
  }
}

<div onPointerDown={this.onThumbDown} ref={this.sliderRef}>
  <div>+</div>
</div>

编辑：好的，我想我终于弄清楚了这个问题（但我还不知道解决方案）：因此，模态（我的情况也是如此）通常带有带色黑色背景，您可以单击轻松关闭模态。我既可以将黑色背景作为直接父对象，也可以将父对象的模型内容作为同级对象。

[如果我将其作为直接父级，那么我必须在每个可能的子组件上调用stopPropagation / return false，因此单击它们不会导致单击向上传播并单击背景模式并导致其关闭。所以我不想作为父母，因为那是一个很大的麻烦。

[另一方面，如果我将其作为父级的同级，则我无法在文档stopPropagation事件上调用thumbUp，因为模态背景遮罩不是直接的父级，因此将其注册为点击并尽管调用了stopPropagation仍关闭了模式，因为它不是直接父代。

[基本上，两种方法都不起作用。我不知道该如何调和。

Answer 1

正如评论中的@Sarvesh所述，您可以在事件监听器中添加第三个参数，但是您无需使用布尔值，而是需要使用capture选项从上到下（而不是从上到下）触发事件想要这样：

document.addEventListener("pointerup", this.onThumbUp, { capture: true });

您现在可以根据需要在stopPropagation()事件或任何其他事件中添加mouseUp。>>