被聚焦时，HTML按钮无法点击，甚至和CSS规则踢 [英] HTML button does not click even when is focused and the CSS rules kick in

问题描述

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

我的Chrome，如果你点击顶部边框，即使：悬停和：激活CSS规则触发时，将不会触发事件。如果您单击更多的中央，然后它工作正常。

I Chrome, if you click on the top border, even when the ":hover" and ":active" css rules triggers, the event is not triggered. If you click more in the center, then it works fine.

在IE9中，如果你做同样的它错过了点击的50％。

In IE9, if you do the same it miss the 50% of the clicks.

问题是利润，当你点击边缘交换机，使得按键的效果推，但是这使得指针被淘汰的按钮，如果你点击顶部边框，但...事件应该是已经触发....为什么出现这种情况？

The problem are the margins, when you click the margins switch, giving the effect of the button being pushed, but this makes the pointer be out of the button if you are clicking the top border but... the event should be already triggered.... why this happen?

感谢。

推荐答案

这可能是因为一个点击（）被视为已完成一次既鼠标按下（）和鼠标松开（）正在陆续完成。在点击顶部的边界附近的情况下，鼠标松开（）永远不会被触发，并为同样也是如此点击（）

This probably happens because a click() is considered complete only once both mousedown() and mouseup() are completed in succession. In the case of clicking near the top border mouseup() never gets triggered and the same holds true for click().

如果您使用鼠标按下（）它会工作每一次，但整个点击完成之前它会发生。

If you use mousedown() it'll work every time, but it'll happen before the entire click is completed.

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

要解决这个问题，你可以做到以下几点：

To solve this you could do the following:

添加一个容器按钮，然后添加一个鼠标按下处理程序的按钮和一个鼠标松开处理的容器。如果你要确保他们都被调用，那么你可以肯定的是已执行上的按钮单击事件。

Add a container to the button and then add a mousedown handler to the button and a mouseup handler to the container. If you make sure they were both invoked, then you can be sure that a click event on the button has been performed.

像这样：

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

​

这篇关于被聚焦时，HTML按钮无法点击，甚至和CSS规则踢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！