父节点事件监听器上的所有儿童触发节点太

Question

我写从无到有香草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的。在此之后，e.stopPropagation()在鼠标按下发挥预期。

感谢暴露我e.currentTarget，我不知道它在这个线程读取帮助之前。

Answer 2

如果我没有理解你的问题，那么一个选项（其中包括）是区分事件的起源，并通过像这样的currentTarget对象的target和event领域过滤事件处理：

if(event.currentTarget === event.target) {
   /* The user is interacting with the actual -jsDraggable element */
}
else {
   /* The user is interacting with a descendant of a -jsDraggable element */
}

这实际上意味着，如果是产卵事件的元素（即currentTarget）是该事件处理程序已绑定到相同的元素（即target），然后我们确定该事件是相对于实际-jsDraggable元素本身（而不是一个后代）。这种方式赞美你当前的代码如下所示：

function handleMouseMove(event) {
  if(event.currentTarget === event.target) {
    console.log(Date.now(), 'Mouse move over draggable');
  }
}
function handleMouseDown(event) {
  if(event.currentTarget === event.target) {
    console.log(Date.now(), 'Drag start on draggable');
  }
}
function handleMouseUp(event) {
  if(event.currentTarget === event.target) {
    console.log(Date.now(), 'Drag end on draggable');
  }
}

function setListeners() {

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

    targets.forEach(elem => {

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

    });
}

setListeners();

ul {
  padding:1rem;
  background:lightgreen;
}
li {
  padding:1rem;
  background:pink;
}
.-jsDraggable {
  background:lightblue;
}

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