javascript - 父节点上的事件监听器也在所有子节点上触发

Question

我正在从头开始用 vanilla js 编写一个可拖动类(这与 jQuery 可拖动无关)，并且它工作得很好，只有我的监听器在所选节点的子节点上触发。我试过e.stopPropagation()但它似乎并没有改变结果。

这是该类的代码片段:

setListeners() {

    const targets = document.getElementsByClassName("-jsDraggable");

    [...targets].forEach(elem => {

        elem.addEventListener("mousemove", e => this.handleMouseMove(e));
        elem.addEventListener("mousedown", e => this.handleMouseDown(e));
        elem.addEventListener("mouseup", e => this.handleMouseUp(e));

    });
}

...例如:

<ul class="-jsDraggable">
    <li>No drag</li>
    <li>No drag</li>
    <li class="-jsDraggable">Can drag this item</li>
    <li>No drag</li>
</ul>

在这种情况下，我想要 <ul class="-jsDraggable">...</ul>受到影响还单例<li class="-jsDraggable">...</li>在里面，从其他列表项之一拖动只需拖动主 <ul class="-jsDraggable">...</ul>元素。

但是，无论我与哪个子节点交互，无论它与具有该类的节点相比在 DOM 中的位置有多远，它都会触发处理程序。

任何帮助将不胜感激!

编辑:另一个需要澄清的例子:

<article class="-jsDraggable">
    <header>
        <h1>Heading</h1>
    </header>
    <main>
        <p>...</p>
    </main>
</article>

无论我将这个 <article> 拖到哪里元素，它应该将整个 HTML 组作为一个整体拖动(因为它的父级都有该类)。然而，目前它的行为更像是这样:

<article class="-jsDraggable">
    <header class="-jsDraggable">
        <h1 class="-jsDraggable">Heading</h1>
    </header>
    <main class="-jsDraggable">
        <p class="-jsDraggable">...</p>
    </main>
</article>

...每个子级也在移动，而它只应该移动附加了该类的父容器。

Answer 1

我解决了它，它不起作用，因为我将当前元素设置为 this.elem = e.target 而不是 this.elem = e.currentTarget 。此后，mousedown 中的 e.stopPropagation() 按预期工作。

感谢您让我了解 e.currentTarget，在阅读此线程中的帮助之前我并不知道它。