HTML jquery 按钮有时没有反应

Question

您好，我有几个简单的按钮，有时没有反应。它很少发生，但我仍然不喜欢它。如果您非常快速地单击或非常快速地更改导航，它会发生更多。这是我为他们准备的代码：

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

它们仅用于显示和隐藏文本，并且在单击时还会更改颜色不透明度等。当他们没有反应时，什么也没有发生，就好像我没有定义任何点击函数一样。

DEMO

^这是我基本上使用的，尝试以随机顺序击中它们并以快速方式切换（如果你做得快，会发生更多）。你会看到有时他们没有反应。它有点难以注意到，因为它很少发生（有时更频繁），所以它一开始可能不会发生，但它肯定会发生。所以多试几次，你就会明白我在说什么了。你做的越快越随意，它就会发生的越多。

Answer 1

在玩过您的演示后，我注意到问题是在单击每个按钮上的某个位置时发生的，而不是通过随机单击或以特定速度单击它们。最佳位置通常位于按钮文本边缘的右侧边距处。

我发现从 CSS 中删除 .button:active{} 伪类可以解决问题，所以我的猜测是 CSS 中按钮位置的移动会干扰点击事件。我的建议是将移除的 CSS 样式合并到 click（或 mousedown）事件本身而不是 :active 伪类中。

Answer 2

我不知道具体原因，但我想问题是因为当你像这样使用选择器时：

 $('[id*=contact]').myFunction();

JQuery 它会花费更多时间来找到正确的选择器，并且如果在下次单击之前没有找到它，则不会做出反应。 在一个复杂的页面中，充满了 div 和信息，可能会出现故障。

对此的支持，我尝试仅更改 onclick 回调，它似乎效果更好：http://jsfiddle.net/mMF5r/7/