Question

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

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

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

你可以在这里看到它：http://jsfiddle.net/yg775/我夸大了转变，使其更加明显。单击按钮上的文本下方以查看效果。

观察：

死区的大小与我正在移动文本的像素数成正比。
死区只在文字下面。在X轴上向左或向右移动鼠标，您可以看到点击事件在不直接在文本下面时触发。
这仅适用于Google Chrome

前一段时间有人注意到了这一点（Small dead space on a div button in chrome），但这个问题实际上比他提到的案例更为普遍。 “答案”也是触发mousedown，但这对我不起作用。 “click”与“mousedown”的行为不同，我需要“点击”。

有任何想法如何绕过这个？

Answer 1

不幸的是，它似乎是.click()命令的错误：https://stackoverflow.com/a/5081144。总结（引自上面的链接）：

如果您在填充上进行了操作，请在填充上移动鼠标和鼠标，单击事件触发。

如果您在填充上移动了鼠标，但现在鼠标移动到文本，则没有点击事件。

由于您需要使用.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，但它确实有效。

为什么在以下情况下不会在Chrome中点击事件触发：主动转移文字？

1 个答案: