javascript - 即使聚焦并且 CSS 规则生效，HTML 按钮也不会单击

Question

看看这个按钮:http://jsfiddle.net/vtortola/Dnxpe/

我是 Chrome，如果你点击顶部边框，即使触发了“:hover”和“:active”css 规则，也不会触发该事件。如果你在中心点击更多，那么它工作正常。

在 IE9 中，如果你这样做，它会错过 50% 的点击。

问题是边距，当您单击边距开关时，会产生按钮被按下的效果，但是如果您单击顶部边框，这会使指针超出按钮但是......事件应该是已经触发....为什么会这样？

谢谢。

Answer 1

这可能是因为 click() 只有在 mousedown() 和 mouseup() 连续完成后才被认为是完成的。在顶部边界附近单击的情况下，mouseup() 永远不会被触发，这同样适用于 click()。

如果您使用 mousedown() 它每次都会起作用，但它会在整个点击完成之前发生。

$('button').mousedown(function(e){
    $('#clicks').append('<span>click </span>');
});

要解决这个问题，您可以执行以下操作:

将容器添加到按钮，然后将 mousedown 处理程序添加到按钮，将 mouseup 处理程序添加到容器。如果您确定它们都被调用，那么您可以确定按钮上的点击事件已被执行。

像这样:

HTML

<div id="cont"><button>Click me</button></div>
<div id="clicks">
</div>​​​​​​​​

JavaScript

var mdown = false;

$('button').mousedown(function(e){
    mdown = true;
});

$('#cont').mouseup(function(e){
    if (mdown)
    {
        $('#clicks').append('<span>click </span>');
        mdown = false;
    }
});

​