即使获得焦点并且 CSS 规则生效，HTML 按钮也不会单击

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

在Chrome中，如果点击顶部边框，即使“:hover”和“:active”css规则触发，事件也不会触发。如果您在中心单击更多，则效果很好。

在 IE9 中，如果您执行相同的操作，则会错过 50% 的点击。

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

Thanks.

发生这种情况可能是因为click()仅当两者都完成时才被认为是完整的mousedown() and mouseup()都陆续完成。单击顶部边框附近的情况下mouseup()永远不会被触发，这同样适用于click().

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

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

要解决此问题，您可以执行以下操作：

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

Like so:

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

​