css - 为什么在 :active shifts the text? 时不在 Chrome 中触发点击事件

Question

我有一些按钮的自定义样式。为了模拟它被按下时的 3D 外观，我使用 :active 伪类将文本向下移动几个像素，如下所示:

input[type=button] {
  padding-top: 4px;
  padding-bottom: 4px;
}
input[type=button]:active {
  padding-top: 6px;
  padding-bottom: 2px;
}

问题是，当我这样做时，在 Chrome 中，文本下方有 2 个像素的死 Angular 。单击这些像素时，不会触发“单击”事件。

您可以在此处查看实际效果:http://jsfiddle.net/yg775/我夸大了移动以使其更明显。单击按钮上的文本下方以查看效果。

观察:

• 死区的大小与我移动文本的像素数成正比。
• 死区仅在文本下方。在X轴上左右移动鼠标，可以看到点击事件不在正文下方时触发。
• 这只发生在谷歌浏览器上

不久前有人注意到了这一点(Small dead space on a div button in chrome)，但这个问题实际上比他提到的情况更为普遍。此外，“答案”是在按下鼠标时触发，但这对我不起作用。 “点击”与“鼠标按下”的行为不同，我需要“点击”。

有什么想法可以解决这个问题吗？

Answer 1

不幸的是，这似乎是 .click() 的错误命令:https://stackoverflow.com/a/5081144 .总结(从上面的链接引用):

• If you mousedown on the padding move the mouse and mouseup on the padding, click event fires.
• If you mousedown on the padding move the mouse but now mouseup on the text, there is no click event.

因为您需要使用 .click()命令，这里可能是一个修复:http://jsfiddle.net/yg775/12/ .

JQuery:

$('#button_box').mousedown(function() {
    clicked = true;
});

$('#button_box').mouseup(function() {
    if (clicked) {
        paddingClicked = true;
        $("#button_box").trigger( "click" );
    }
});

$(document).mouseup(function() {
    if (!paddingClicked) {
        clicked = false;
    }
});

$('#button_box').click(function() {
    clicked = false;
    if (paddingClicked) {
        numClicks++;
        $('#display').text(numClicks.toString()+' clicks');
        paddingClicked = false;
    }
});

我有一个名为 button_box 的容器 div与 .mousedown() 一起使用和 .mouseup() .这些设置了两个标志，然后调用 .trigger( "click" )模拟点击。

$(document).mouseup(...)如果您单击按钮然后将鼠标拖到 .mouseup() 之前，就可以捕捉到按钮被调用以重置标志。如果没有它，您可以单击按钮外部，然后将鼠标拖回原处，它会注册 .mouseup()。 .有点 hacky，但它确实有效。