在孩子身上mousedown时取消点击父母

Question

我已经阅读了几篇与此相似的帖子，但没有一个对我有用。

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

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

• ＆＃34;子＆＃34;有mousedown，mousemove和mouseup的事件处理程序。
• ＆＃34;父＆＃34;有一个用于点击的事件处理程序。
• ＆＃34;父＆＃34;比儿子＆＃34;大。

要求：

• 一个人必须能够在里面＆＃34;儿子＆＃34; mousedown-mousemove-mouseup。 [OK]
• 必须能够点击＆＃34; parent＆＃34;。 [OK]

但是，如果有人将鼠标拖出＆＃34;儿子＆＃34;并释放它，＆＃34;父母＆＃34;点击处理程序火灾。

有什么办法可以避免吗？

我应该更改布局吗？

谢谢！

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

（请，纯粹的javascript！）

Answer 1

您需要阻止“son”click事件冒泡DOM树：

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

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

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