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

Question

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

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

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

Answer 1

CSS。这是因为 ma​​rgin: 10px; 在 #btn

编辑

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

解释:

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

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

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