HTML button does not click even when is focused and the CSS rules kick in

Question

Take a look at this button: http://jsfiddle.net/vtortola/Dnxpe/

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.

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?

Thanks.

Answer 1

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.

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

​