Chrome中div按钮上的小死区

Question

我无法解释这个问题。我有一个div，它是一个按钮。当单击时，我使用:active伪类和position: relative;将其稍微向下移动和向右移动，以使其具有动画效果。由于某种原因，在Chrome中，该按钮存在一个小的死区，位于文本和按钮边缘之间的一半左右。虚拟类仍然会触发，但按钮上的Javascript不会。如果我删除position relative，则问题消失。Firefox也会出现此问题，但Firefox中的死区位于按钮移开的边缘处，这是有道理的，但也需要修复。

我创建了一个JSFiddle来展示这个问题：http://jsfiddle.net/dillydadally/CUHA7/6/ 有什么想法为什么会发生这种情况吗？有没有办法解决它？

- dallin

---

奇怪的是，只有在使用Chrome时，当命中“甜点”时回调函数才不会被调用。 - Michael R

Answer 1

CSS。这是因为在#btn上使用了margin: 10px;

编辑

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

解释：

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

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

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

- Diego ZoracKy

---

不行，因为边距影响的是按钮外部而非 div 区域，所以这不应该是问题的原因。 - Nuxy

抱歉，我理解错了。我以为你在抱怨文本和按钮之间的空格。 - Diego ZoracKy

它在谈论一个奇怪的效果。当您单击div的某个区域时，将执行CSS：active，但不会产生JavaScript调用。 - Nuxy

现在我看到了。有趣。以前从未见过，但我会告诉你发生了什么。伪类在onClick之前被激活。因此，在left和top的新值之后。您不再将鼠标放在div上方。如果您将:active的值从2px更改为20px。即使您单击按钮中间，也会看到这种情况发生。 - Diego ZoracKy

这个问题不是我的，但它可以作为一个答案... 但是实际上，在状态处于活动状态时，有一部分仍然停留在div中，但JavaScript没有被执行。 - Nuxy