jquery - jquery: ボタンのマウスダウン状態の変更

Question

OK、これは簡単なはずですが、うまくいかないようです。

ボタンがあります。クリックすると状態が変わりますが、OS のネイティブボタンのように、ボタンが押されている間だけです。

だからここに私のコードがあります...

$('button').live('mousedown', function(){

    $(this).addClass('down');

}).live('mouseup', function(){
    $(this).removeClass('down');
});

十分に単純に見えます...しかし、これは機能しません。クリックすると、状態が変化します...しかし、そのままです...マウスアップイベントは、2回目にクリックしたときにのみ機能します。

これは、toggleClass でも発生し、フォーカス/ぼかしイベントからコードを実行したときにも発生します。

ここで何が起こっているのか、どうすれば正しく動作させることができますか?

score 4 · Accepted Answer

代わりに CSS の使用を検討する必要があります。JavaScript を使用してクラスを追加/削除するよりも、表示目的ではるかに高速です。

button:active { /* this is the mousedown pseudoelement */ }
input:focus, textarea:focus { /* this represents text input fields with focus */ }

score 1 · Accepted Answer

jQuery で書かれたCybermotronによって投稿された元のソリューションは、Chrome、Firefox、および IE で完璧に動作します。

うまくいかない場合は、mouseup 機能に 200ms 程度のタイムアウトを設定すると、機能が改善される可能性があります。やりたいことのすべてがクラスではありません。

2 に答える 2