div onclick事件如果css div：active将其触发则不会触发

Question

我希望标题足够准确，足以说明我面临的问题。

我有一个div （尝试了多种不同的东西： a ， span ， button ，都面临相同的问题），即使单击css div:active ，单击onclick事件也不会触发。

这似乎是由于这样的事实，在div:active我将top: 6px设置为“下推”效果。 效果看起来不错，只是有时候，如果您由于某种原因在元素的顶部或中心单击，div似乎会“移开”而不调用onclick事件。

我认为一个好的解决方案是将元素包装在另一个div中，然后将onclick事件附加到该div。 不过令我惊讶的是，这些点击并没有朝着按钮的顶部或中间触发。

如果我删除div:active底部的top: 6px ，则按钮可以正常工作，只是没有相同的“推入”效果。

我发现这很难解释，所以这是屏幕截图（蓝色区域是onclick不会触发的区域）：

这是最初尝试的代码： http : //jsfiddle.net/RS5Q5/6/

以及将onclick侦听器移到外部的代码： http ： //jsfiddle.net/RS5Q5/4/ （onclick会在div中除图片上蓝色部分之外的所有位置触发）

还值得注意的是，在Firefox中，中间的蓝色区域和底部的蓝色区域似乎单击得很好，但是铬或野生动物园则没有。 顶部的蓝色区域仍然是一个问题。

对这种奇怪的行为有任何解决办法或解释吗？ 任何指导都将不胜感激。 谢谢。

Answer 1

可能是因为在单击事件期间移动内容时浏览器会感到困惑。 通常会发生这种情况，因为用户先按下鼠标按钮，然后在释放之前将其拖动，但是我想如果内容本身移动到单击位置下方，情况也是如此。

如果您使用mousedown / mouseup事件而不是click会发生什么？