从子级拖动到父级时如何防止父级单击事件答案

【问题标题】：How to prevent parent click event when dragging from child to parent从子级拖动到父级时如何防止父级单击事件
【发布时间】：2017-07-11 18:50:21
【问题描述】：

如果您希望子元素内的点击不会冒泡到其父元素，您可以使用 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。但我希望有更好的解决方案

【问题讨论】：

Note 在 Firefox 中的行为与 chrome 不同。当 mouseup 发生时，父点击不会在 firefox 中触发
我在 Chrome 中测试 :) 但是 FF 显示了我需要的行为！！
对...我想通了。起初我很困惑，因为我第一次在 Firefox 中查看了演示并且在那里看起来很好

标签： javascript preventdefault dom-events stoppropagation

【解决方案1】：

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

与此同时，我要做的是在侦听器范围之外添加一个额外的变量。 onClick 您可以将该变量分配给您单击的任何项目。

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

【讨论】：