Javascript 在元素内部单击并将鼠标拖动到元素外部

我肯定已经有人遇到了这样的问题，但不幸的是我找不到答案

window.onload=函数（e）{
var foo=document.getElementById（'foo'）；
foo.addEventListener（'click'，函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
警报（“foo”）；
});
document.body.addEventListener（'click'，函数（e）{
警惕（“身体”）；
});
};
#foo{
宽度：200px；
高度：200px；
背景色：红色；
光标：指针；
}
身体，
html{
宽度：100%；
身高：100%；
}
单击我
使用：

防止调用同一事件的其他侦听器

来源MDN：


window.onload=函数（e）{
var foo=document.getElementById（'foo'）；
foo.addEventListener（'click'，函数（e）{
e、 停止即时复制（）；
e、 预防默认值（）；
警报（“foo”）；
});
document.body.addEventListener（'click'，函数（e）{
警惕（“身体”）；
});
};
#foo{
宽度：200px；
高度：200px；
背景色：红色；
光标：指针；
}
身体，
html{
宽度：100%；
身高：100%；
}
点击我
看起来Firefox是唯一一款在光标离开原始元素时不点击的浏览器。在与webkit相关的浏览器上，没有原始的
mousedown
的痕迹，但所有事件数据都基于这样一个事实，就好像在
body
上触发了完整的单击。因此，没有办法根据点击本身进行区分。可能有一些解决方法，但这里有一个-检查是否有任何单击源于元素上的
mousedown
：


window.addEventListener（'load'，function（）{
var foo=document.getElementById（'foo'），fromfoo，
origin=document.getElementById（'origin'）；
foo.addEventListener（'mousedown'，函数（e）{
e、 停止传播（）；
fromfoo=true；
});
document.body.addEventListener（'mousedown'，function（）{
fromfoo=false；
});
foo.addEventListener（'mouseup'，函数（e）{
e、 停止传播（）；
if（fromfoo）origin.innerHTML='foo'；
});
document.body.addEventListener（'mouseup'，function（）{
if（fromfoo）origin.innerHTML='不同'；
else origin.innerHTML='body'；
});
});
html，正文{
宽度：100%；
身高：100%；
保证金：0；
}
#起源{
浮动：对；
利润率：50px 100px；
}
#福{
宽度：200px；
高度：200px；
背景色：红色；
光标：指针；
}

单击我
事件。stopImmediatePropagation（）
可以特别解决此问题。我认为您玩的事件是错误的！试着用mousedown和mouseup。要玩拖拽，这很有用：拖拽，拖拽，拖拽，拖拽，拖拽，拖拽，拖拽，拖拽。。。这也很有趣-它仍然会在
主体
上触发
单击
，即使
鼠标悬停在另一个没有冒泡事件的元素上：。我认为这不会解决问题：（你测试过了吗？刚刚更新了JSFIDLE，但对于“忽略”来说，它起到了很早的作用，确实你的答案很有帮助，我也有这样的想法，但解决方案并不完美。我期待理想的解决方案，如果没有人出现，我会选择你的答案作为解决方案！谢谢你的回答-很抱歉我没有耐心。我已经知道了对此进行了广泛的讨论，记录了事件本身，并对它们进行了详细的比较。幻影点击
主体
似乎与直接点击它完全相同。不幸的是，点击本身是无法阻止的，只是它们的默认动作以及它们是否会冒泡。所以我认为没有办法关于使用这些不同的事件。与所有浏览器匹配似乎有点过于复杂，但看起来不可避免。这是一个非常有趣的问题，你在谷歌上发布的结果是空的。是的，我也认为没有人会找到更好的解决方案，但让我们再等一天，然后我会检查你的答案！再次感谢你的帮助，伙计！如果没有这里有任何人提供更好的解决方案，我很高兴看到它，并一定会投票。干杯。
e.stopImmediatePropagation();