logo标签列表

CSS按钮/链接在某些点击上无法注册

cssbuttonhyperlinkclick
7
我想要一个按钮在被点击后“凹陷”。但是，我尝试的方法有一个不良影响——某些位置上的点击未被注册。 这个问题与JavaScript无关。我下面链接了一个JSFiddle，使用了一个JavaScript点击事件监听器，但这只是为了更好地描述问题。我面临的实际问题与事件监听器无关——当在各种位置点击超链接时（浏览器不会导航到链接的页面，即使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;
}
按钮内的HTML：
<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>

这里有一个 JSFiddle，更深入地描述了问题：http://jsfiddle.net/g105b/d3Y9X/ 还有一个问题的录像：http://youtu.be/N6UfWdbA1Ac 问题是当按钮中发生任何移动... 这可能是 "top" 属性的变化 - 就像这个例子中的一样 - margin-top、负的 margin-bottom、translateY、padding-top ... 必须有一种方法来创建这种类型的按钮效果，而不会有这个问题？
我正在使用 Chrome 29，用于录制视频，但问题在 Firefox 23 中也显而易见，虽然在 Firefox 中 "无效区域" 在按钮内的位置不同。
可以使用mousedown事件吗？我发现在这个fiddle中可以工作：jsfiddle.net/d3Y9X/6 - cjross
@cjross JSFiddle中的JavaScript仅用于显示问题-实际上，我遇到的问题是当单击链接时，链接实际上并没有跟随超链接页面（完全忽略JavaScript）。我添加了点击事件侦听器，以便更明显地了解出现了什么问题。 - Greg
请问您能否更新您的问题并附上相关的HTML代码？ - cjross
5个回答
3
这是因为您使用 :active 选择器移动了按钮，元素的顶部会发生 8px 的变化，这在单击事件被 JavaScript 注册之前就已发生。所以当您在最上面的 8 个像素内单击时，单击不会被注册。
您也可以通过在 :active 中更改 padding-top 值来实现相同的效果。
a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

Updated fiddle: http://jsfiddle.net/NT5e2/

你的代码与我的完全一样 - 添加padding-top不会改变任何东西。 - Greg
此外，不仅是按钮顶部无响应 - 观看Youtube视频，它在按钮高度的1/3和2/3处也无法注册点击。 - Greg
1
我认为我们可以使用“mousedown”代替“click”，这样就可以解决这个问题。
更新后的fiddle: http://jsfiddle.net/d3Y9X/8/ 
document.querySelector("a.fatButton").addEventListener("mousedown", function(e){
    c++;
    csp.textContent = c;
    e.preventDefault();
    return false;
});
+1 只是回答问题的字面意思，但我不能接受它作为回答我的实际问题。我已经编辑了我的原始问题：虽然 mousedown 是处理 JavaScript 事件的一种解决方法，但我的 实际 问题是链接本身不起作用作为超链接 - fiddle 中的 JavaScript 只是为了更容易地描述问题而添加的。 - Greg
0

看起来是位置问题，去掉position:relative就可以了。 新代码...

a.fatButton {
    display: inline-block;

    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 id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>
这个功能无法正常工作。当您删除position属性时，按钮在被点击时不会向下移动。默认情况下，position是static。为了应用top属性，position应该是relative。 - Beginner
0
原因在于使用:active伪类可以在点击元素时应用CSS。因此它会在单击事件触发之前出现。当您将按钮位置向下移动8px时，按钮不再存在，并且已向下移动了8px，因此单击事件不会触发，链接也无法工作。
解决方案：我认为您应该设计一个具有阴影的背景图像和另一个没有阴影的背景图像，并在单击按钮时切换按钮的背景图像。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接