如何在从子级拖动到父级时阻止父级单击事件

Question

如果您希望子元素内的点击不要冒泡到其父元素，您可以使用stopPropagation停止冒泡

<div class="parent">
    <div class="child"></div>
</div>

document.querySelector('.parent').addEventListener('click', ()=> { .. }
document.querySelector('.child').addEventListener('click', ()=> { .. }

DEMO

但是，如果点击在孩子内部开始并在外面结束，那么如何阻止父点击。换句话说：mousedown在孩子内部，然后是mousemove，它将指针移到孩子外面（但在父母内部）然后mouseup

对我来说最重要的是，在这种情况下我不希望父母点击，有什么建议吗？

更新：如果你还记得mousedown目标，你可以在父点击回调中使用它：DEMO。但我希望有更好的解决方案

Answer 1

我希望我能清楚地理解你的问题。您正在寻找一种事件或某种类型的方法，使您始终可以找到单击的第一个值。 e.stopPropagation（）＆amp; capture属性作为事件监听器的第三个参数也不起作用。

我平时会做的是在听众范围之外添加一个额外的变量。 onClick您可以将该变量分配给您单击的项目。

或者您可以将点击处理程序修改为'mousedown.'这样，如果用户拖离他们第一次点击的部分就无关紧要了。用户将鼠标停下来，他们将触发事件。