6

bind()次のように、jQuery を使用して、イベントをアタッチする HTML ボタンがあります。

$('#mybutton').bind('click', myFirstHandlerFunction);

ではmyFirstHandlerFunction、このハンドラーを次のように新しいハンドラーに置き換えたいと思いmySecondHandlerFunctionます。

function myFirstHandlerFunction(e) {
    $(this).unbind('click', myFirstHandlerFunction).bind('click', mySecondHandlerFunction);
}

2 番目のクリック ハンドラーではmySecondHandlerFunction、ボタンを元の状態に切り替えたいと思います。次のように、ハンドラーをアンバインドし、mySecondHandlerFunction元のハンドラーを再アタッチしmyFirstHandlerFunctionます。

function mySecondHandlerFunction(e) {
    $(this).unbind('click', mySecondHandlerFunction).bind('click', myFirstHandlerFunction);
}

これはうまく機能しますが、細かい点が 1 つあります。クリック イベントはボタンの各クリック ハンドラーを介してまだ伝播されていないため、クリック イベントはボタンの次のクリック ハンドラーに渡されます。前のハンドラー。mySecondHandlerFunctionが実行された直後に最終結果が実行されてmyFirstHandlerFunctionいます。

この問題は、各ハンドラーを呼び出すことで簡単に解決できますe.stopPropagation()が、これには、個別にアタッチされている可能性のある他のクリック ハンドラーがキャンセルされるというマイナスの副作用があります。

クリック イベントの伝播を停止することなく、2 つのクリック ハンドラーを安全かつ一貫して切り替える方法はありますか?

4

6 に答える 6

8

更新:この形式のtoggle()は jQuery 1.9 で削除されたため、以下のソリューションは機能しなくなりました。代替案については、この質問を参照してください。

toggle()が問題を解決するようです:

$("#mybutton").toggle(myFirstHandlerFunction, mySecondHandlerFunction);

上記のコードは登録さmyFirstHandlerFunctionれmySecondHandlerFunction、別のクリックで呼び出されます。

于 2013-01-03T08:26:02.420 に答える
6

ブール値を使用してハンドラーの機能を切り替えるだけです。どのハンドラーがリッスンしているかを調整する必要はありません。

$('#mybutton').bind('click', myHandlerFunction);
var first = true;

function myHandlerFunction(e) {
    if(first){
        // Code from the first handler here;
    }else{
        // Code from the second handler here;
    }
    first = !first; // Invert `first`
}
于 2013-01-03T08:24:37.693 に答える
-1

data-click-stateこれは、ボタンに属性を追加するのに役立ちます

$(document).ready(function() {
    $('#mybutton').on('click', function() {
        if ($(this).attr('data-click-state') == 1) {
            $(this).attr('data-click-state', 0)
            myFirstHandlerFunction();
        } else {
            $(this).attr('data-click-state', 1)
            mySecondHandlerFunction();
        }
    });
});
于 2016-10-27T18:08:23.840 に答える
-2

このような：

$(this).bind('click', myMasterHandler);

handler = 0;

function myMasterHandler(e) {
    if(handler == 0) {
        myFirstHandler(e);
        handler = 1;
    } else {
        mySecondHandler(e);
        handler = 0;
    }
}
于 2013-01-03T08:25:52.937 に答える