当鼠标按下子级时取消单击父级

Question

我已经阅读了几篇类似问题的帖子，但没有一个对我有用。

有两个div，一个是另一个的父级：

<parent>
  <son></son>
</parent>

• “Son”具有 mousedown、mousemove 和 mouseup 的事件处理程序。
• “父”有一个点击事件处理程序。
• “父”大于“子”。

要求：

• 必须能够在“儿子”内进行 mousedown-mousemove-mouseup。 [好的]
• 必须能够单击“父级”。 [好的]

但是，如果有人将鼠标拖出“儿子”并释放它，“父母”的点击处理程序就会触发。

有什么办法可以避免吗？

我应该改变我的布局吗？

谢谢！

http://jsfiddle.net/g3qzkz74/17/

（拜托，纯javascript！）

Answer 1

您需要防止“儿子”click 事件冒泡 DOM 树：

function sonClick(e) {
    e.stopPropagation();
}

document.getElementById('son').addEventListener('click', sonClick, false);

演示：http://jsfiddle.net/g3qzkz74/14/