我希望标题足够准确以描述我面临的问题。
我有一个div(尝试了多种不同的东西:a、span、button，都面向同样的问题)当它被点击时，onclick 事件不会触发，即使 css div:active 会被调用。
这似乎是因为在 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 中似乎可以正常点击，但在 Chrome 或 Safari 中却不行。顶部蓝色区域仍然是一个问题。
对这种奇怪的行为有任何修复或解释吗？任何指导都将不胜感激。谢谢。
最佳答案
可能是因为在单击事件期间内容移动时浏览器会感到困惑。这通常是因为用户按下鼠标按钮然后在释放之前进行拖动，但我想如果内容本身移动到点击位置下方也是如此。
如果您使用 mousedown/mouseup 事件而不是单击会发生什么情况？
关于javascript - 如果 css div :active moves it，则不会触发 div onclick 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17732970/