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;
}

容器 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 中按钮的不同位置。

4

5 回答 5

3

这是因为您正在使用 :active 选择器移动按钮。元素的顶部变化了 8px，这发生在使用 Javascript 注册 click 事件之前。因此，当您在前 8 个像素内点击时，点击不会注册。

您也可以通过更改 :active 中的 padding-top 值来实现相同的效果。

a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

更新小提琴：http: //jsfiddle.net/NT5e2/

于 2013-09-10T18:06:18.033 回答
1

我认为我们可以使用“mousedown”而不是“click”，可以解决这个问题

更新小提琴：http: //jsfiddle.net/d3Y9X/8/

document.querySelector("a.fatButton").addEventListener("mousedown", function(e){
    c++;
    csp.textContent = c;
    e.preventDefault();
    return false;
});
于 2013-09-12T07:40:08.750 回答
0

似乎位置问题删除位置：相对它将工作新代码......

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>
于 2013-09-21T10:28:02.013 回答
0

原因是:active伪类用于在单击元素时将 CSS 应用于元素。所以它发生在点击事件触发之前。当您将按钮位置8px向下移动时，该按钮不再存在并且已8px向下移动，因此不会触发单击事件并且链接不起作用。

Solution: 我认为您应该设计一个带阴影的背景图像和另一个没有阴影的背景图像，并在单击按钮时切换按钮的背景图像。

于 2013-09-21T10:24:06.517 回答
0

如果您移动这样的元素（在您的情况下，使用 top 或 padding 值）“mousedown”事件仍然存在，但您正在更改该按下将触发“click”DOM 事件的区域。

也许这会有所帮助：

http://css-tricks.com/video-screencasts/123-if-it-moves-when-you-click-make-something-stick/

于 2013-11-04T10:06:50.180 回答