CSS按钮/链接没有注册点击
点击时我想要一个按钮“压低”。 但是，我尝试的方法具有不良影响 - 按钮上某些位置的某些点击未被注册。
这个问题不是关于JavaScript的。 我已经链接到下面的JSFiddle，它使用了一个JavaScript click事件监听器，但这只是为了更好地描述问题。 我面临的实际问题与事件监听器无关 - 超链接本身在各个地方单击时不起作用（浏览器未导航到链接页面，即使CSS :active类正常工作，浏览器表现得好像没有点击一样）。
我试图塑造的脂肪，令人压抑的按钮。
我正在使用的CSS：
a.fatButton {
display: inline-block;
position: relative;
margin: 8px;
padding: 16px;
background: #faa;
border-radius: 16px;
box-shadow: 0 8px 0 0 #f88;
text-decoration: none;
color: #000;
}
a.fatButton:active {
top: 8px;
box-shadow: none;
}
容器div内按钮的HTML：
<div id="linkContainer">
<a class="fatButton" href="#">Click me</a>
</div>
这是一个JSFiddle更深入地描述了这个问题：http://jsfiddle.net/g105b/d3Y9X/
这里是这个问题的记录：http://youtu.be/N6UfWdbA1Ac
问题是当按钮有任何移动时......这可能是“顶部”属性的变化 - 如本例中 - 边缘顶部，底部边缘底部，translateY，填充顶部.. 。有没有这种问题创建这种按钮效果的方法？
我使用的是Chrome 29，用于录制视频，但Firefox 23中也存在这个问题，尽管Firefox中的按钮位于不同的地方。
这是因为您正在使用：主动选择器来移动按钮。 元素的顶部变化了8px，这发生在click事件使用Javascript注册之前。 所以当你点击前8个像素点击时不会注册。
您也可以通过在以下内容中更改填充顶部值来实现相同的效果：活动。
a.fatButton:active {
top:8px;
padding-top:16px;
box-shadow: none;
}
更新小提琴：http://jsfiddle.net/NT5e2/
我认为我们可以用“mousedown”代替“点击”，可以解决这个问题
更新小提琴：http://jsfiddle.net/d3Y9X/8/
document.querySelector("a.fatButton").addEventListener("mousedown", function(e){
c++;
csp.textContent = c;
e.preventDefault();
return false;
});
原因在于:active伪类用于在点击元素时将CSS应用于元素。 所以它发生在单击事件触发器之前。 当您将按钮位置向下移动8px时，该按钮不再存在，并且它已被移动到8px ，因此click事件不会触发，并且链接不起作用。
Solution:我认为你应该设计一个带有阴影的背景图像和另一个没有阴影的背景图像，并在点击它时切换按钮的背景图像。