javascript - 特定のクラスでクリック ハンドラーのバインドを解除する

Question

クリックできるようにしたいテーブルセルがあります。ただし、クリックすると、クラス「.clicked」が作成されます。表のセルにこのクラスがある場合、クリック可能にしたくありません。これを行う方法はありますか？

Answer 1

また、.off()メソッドを使用して、イベントのバインドを解除することもできます。

$('td').on('click', function(){
    $(this).addClass('clicked').off('click');
})

Answer 2

これは、イベント ハンドラーの先頭にコードを挿入することで簡単に実行できます。

$('td').click(function(e) {
    if ($(this).hasClass('clicked')) {
        e.stopPropagation();
        e.preventDefault();
        return;
    }

    // the rest of your code here
});

もう 1 つのより複雑な方法は、イベント委任を使用し、クリックされたときに要素にクラスがない場合にのみ関数を起動することです。

$('table').on('click', 'td:not(.clicked)', function() {
    // your code here
});

Answer 3

.one()イベント登録メソッドを使用してそれを行うことができます。イベントが発生すると、ハンドラーの登録が解除されます。

$('td').one('click', function(){
    console.log('hanlded', this)
})

別の解決策は次のとおりです。

$('table').on('click', ':not(.clicked)', function(){
    console.log('hanlded', this)
})

Answer 4

:not(.clicked)クリックされたセルを除外するために使用しているセレクターに追加するだけです。