javascript - chrome中div按钮上的小死区

Question

我无法解释这一点。我有一个 div 那是一个按钮。我使用 :active 伪类和 position: relative; 单击时将其稍微向下和向右移动，以使其具有动画效果。出于某种原因，在 Chrome 中的这个按钮上有一个小的死区，大约在文本和按钮边缘的中间。psuedo 类仍然会触发，但按钮上的 Javascript 不会。如果我删除相对位置，问题就会消失。这也发生在 Firefox 中，但 Firefox 中的死区位于按钮移开的边缘，这是有道理的，但也需要修复。

我创建了一个 JSFiddle 来显示问题：http: //jsfiddle.net/dillydadally/CUHA7/6/

知道为什么会这样吗？有没有办法解决它？

Answer 1

CSS。这是因为margin: 10px; 在#btn

编辑

如果您使用onmousedown而不是onclick它将起作用。

解释：

伪类在 onClick 之前被激活。如果将 :active 的值从 2px 更改为 20px。即使您单击按钮的中间，您也会看到这种情况发生。

所以在 :active 设置 left 和 top 的新值之后，鼠标不再位于 div 的顶部，并且无法注册单击（按下和释放）。

但是onmousedown仍然会被触发，因为它不依赖于鼠标按钮的释放。