Question

Hi I have a few simple buttons which sometimes don’t react. It happens rarely but I still don’t like it. It happens more if you click very fast or change the navigation very very fast. This is the code I have for them :

$(document).ready(function () { 
    $('[id*=txt]').hide();
    $('[id*=hd]').hide();                   
    $('[id*=home]').show();
    $('#btnhome').css('background-color',"#555");
    $('#btnhome').css('opacity',"0.4");

    $('.button').click(function (){
        $('[id*=txt]').hide();
        $('[id*=hd]').hide();
        $('.button').css('background',"transparent");
        $('.button').css('opacity',"1");
        $(this).css('background-color',"#555");
        $(this).css('opacity',"0.4");
   });          

    $('#btnhome').click(function () {   
        $('[id*=home]').show();             
    });     

    $('#btnabout').click(function () {              
        $('[id*=about]').show();        
    });    

    $('#btncontact').click(function () {        
        $('[id*=contact]').show();  
    });
});

They are only used for showing and hiding the text and they also change the color opacity and so on when they are clicked. When they don’t react nothing happens at all, as if I don’t have any click function defined.

DEMO

^This is what I’m basically using, try hitting them in a random order and switching in a fast way (happens more if you do it fast). You’ll see that sometimes they don’t react. Its a little bit harder to notice because it happens rarely (sometimes more often) so it wont probably happen at first but it sure happens. So give it a try a good few times and you’ll see what I’m talking about. The more fast and random you do it the more it will happen.

Answer 1

After playing with your demo, I noticed that the issue was occurring when clicking a certain place on each button, not by clicking them randomly or at a certain speed. The sweet spot is usually on the right side at the edge of the button text at the padding.

I found that removing the .button:active{} pseudo-class from your CSS fixes the issue, so my guess is that the shifting of the positioning of the button in the css is interfering with the click event. My suggestion would be to incorporate the removed CSS styling into the click (or mousedown) event itself rather than the :active pseudoclass.