html - :active 疑似クラスを使用する場合の一貫性のないクリック処理

Question

この例でクリックハンドラが一貫して呼び出されない理由を誰か説明できますか?

http://jsfiddle.net/4QBnf/

たとえば、div の左上半分をクリックしても、カウンターが確実にインクリメントされません。

このブロックから padding-top を削除すると、問題なく動作します。

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

さまざまなブラウザでこれをテストしましたが、同じように動作します。

Answer 1

コードに2つの問題があります。ここで修正を表示できます：

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

CSSボックスモデルとjQueryボックスモデル

ボックスの上半分をクリックするときはいつでも、技術的にはをクリックしているのではなく.click-check、実際にはをクリックしてい.countます。この画像は、.count相対的な位置を示してい.click-checkます。

jQueryはこれをクリックとしてカウントしますが.click-check、CSSはカウントしません。数値は増加しますが、CSSの「アクティブ」効果は適用されません。

.countこれを解決するには、 divを削除し、すべてをの中に配置します.click-check。

jQueryカウンター

2番目の問題はjQueryコードにあります。コードは現在次のようになっています。

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

countこの行が完了するまで増加しません。これは、最初のクリックは効果がないように見えることを意味します。

この行は増分countされ、ユーザーに表示されます。

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

ここであなたの例に両方の更新を適用しました：

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

アップデート

この問題を解決する別の方法は、jQueryを介してすべてを実行することです。これにより、すべての外観とロジックが単一のボックスモデルの解釈に同期されます。

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/