Inconsistent click handling when using :active pseudo class

Question

Can anyone explain why the click handler is not invoked consistently in this example?

http://jsfiddle.net/4QBnf/

For instance, if you click in the upper left half of the div, it does not reliably increment the counter.

If I remove the padding-top from this block it works just fine:

.click-check:active {
   background-color:blue;
   padding-top: 25px;
}

I have tested this in a number of different browsers and it behaves the same way.

Answer 1

I found two possible issues with your code. You can view the fixes here:

http://jsfiddle.net/4QBnf/6/

CSS Box Model vs jQuery Box Model

Whenever you click on the top half of your box, you aren't technically clicking on .click-check, you are actually clicking on .count. This image shows the location of .count relative to .click-check:

jQuery counts this as a click on .click-check, but CSS doesn't. The number increments, but the CSS "active" effect isn't applied.

You can resolve this by removing the .count div and placing everything inside of .click-check.

jQuery Counter

The second issue is with your jQuery code. The code currrently reads:

$('.click-check').click(function() { $('.count').html(count++); });

count isn't increased until after this line is done. This means that the first click appears to have no effect.

This line will increment count, then display it to the user:

$('.click-check').click(function() { $('.click-check').html(++count); });

I've applied both updates to your example here:

http://jsfiddle.net/4QBnf/6/

Update

An alternate way to resolve the issue is to do everything through jQuery. This synchronizes all of the appearance and logic into a single box-model interpretation.

var count=0;
$('.click-check').mousedown(function() { 
    $('.click-check').addClass("active");
    $('.click-check').html(++count);

    setTimeout(function(){ 
       $('.click-check').removeClass("active");
    }, 50);

});

http://jsfiddle.net/4QBnf/15/