1

トグルアニメーションが表示されているときにクリックハンドラーを無効にして、複数の高速クリックが原因でアニメーションが構築されないようにしたい。ありがとう

jqueryスクリプト：

$("#button").click({
    $(this).unbind('click').next().toggle("slow",function(){$('#button').bind('click')});
});

htmlコード

<div
   <a href='#' id='button'>Toggle</a>
   <div>
    test
   </div>
</div>
4

5 に答える 5

2

前述のように、イベント添付の実装が壊れています。その上、jQuery には .stop というメソッドがあり、バインド/アンバインドを使用する必要がなくなります。

$("#button").click(function(){
    $(this).next().stop().toggle("slow");
});

アニメーション キューをクリアして現在のアニメーションを停止し、次のアニメーションを起動するだけです。

jQuery ドキュメントの停止機能。clearQueue と goToEnd の 2 つのプロパティがあることに注意してください。この方法をより確実に使用する方法については、こちらをご覧ください。

于 2009-09-22T12:42:08.847 に答える
2

まず、イベントを添付する方法が壊れています。急いで質問しただけなのか、コードの実際のエラーなのかはわかりませんが、ハンドラーを設定する正しい方法は次のとおりです。

$("#button").click(function(evt) { // <- you need to pass it a function!
    $(this).unbind('click').next()
       .toggle("slow",function(){$('#button').bind('click')});
});

しかし、あなたの問題に。jQuery のone関数を使用することでメリットが得られると思います。クリック ハンドラーが呼び出されるとすぐに、クリック ハンドラーとして削除されます。したがって、1 回のクリックで1回だけ実行されます。アニメーションの後にクリック ハンドラーを元に戻す方法については、正しく理解できたと思います。アニメーションの終了後に再バインドします。

function clickHandler(evt) {
    $(this).next().toggle("slow",
        function() {
            $('#button').bind('click', clickHandler);
        });
}

$("#button").one('click', clickHandler);

使用oneが何らかの理由で遅すぎる場合、最速の方法はhref、アンカーのすぐ上に JavaScript を追加することです。ただし、再度実行する準備が整ったら、グローバル ブール変数を切り替える必要があります。

<a href="javascript:clickHandler(); return false;">...</a>

function clickHandler() {
    if( someBoolean ) {
        someBoolean = false;
        //do stuff
    }
    someBoolean = true;
}
于 2009-09-22T12:29:44.940 に答える
1

後続のクリックを無視するのではなく、このstop()方法から何らかのメリットが得られる可能性があります。例については、「クイック ヒント: アニメーション キューの蓄積を防ぐ」を参照してください。彼は について話してhoverいますが、同じイベントでアニメーションを次々に実行する可能性が高い場所であればどこでも当てはまります。

または、クリック ハンドラー全体を削除するのではなく、ボタンを無効にすることはできますか? おそらく、クリックを落とすよりも「二度とクリックしないでください」という意図をよりよく表しています。

于 2009-09-22T12:42:04.930 に答える