0

私はこのパターンに本当にうんざりしています：

$("#moveButton").click(function() {
    if ($(this).hasClass("disabled")) {
        return;
    }
    //do something
});

クラス「無効」が動的に追加された要素のすべてのクリックイベントを傍受したい。

私はこれを試しました：

$('input,a,div').click(function(event){
    if ($(this).hasClass("disabled")) {
        event.preventDefault()
        event.stopPropagation();
    }
});

しかし、どういうわけか機能していません。このスクリプトは私のpage.jsの一番上にあります

更新 落とし穴は、「無効な」クラスを動的に追加できることです。

したがって、ボタンにイベント リスナーを既に追加している場合は、すべてのクリック ハンドラーをインターセプトし、この要素が現在無効になっているかどうかを確認するソリューションが必要です。そうである場合よりも、このイベントがハンドラーによってキャッチされるのを停止します。

4

4 に答える 4

2

このコードを使用してください

    $('input,a,div').click(function(event){
    if ($(this).hasClass("disabled")) {
        return false;
    }
});
于 2013-07-20T21:36:10.233 に答える
2

それらの要素を除外するだけですか？

$('input,a,div').not('.disabled').on('click', function(){
    // do stuff 
});

クラスが後で追加された場合は、委任されたイベント ハンドラーを使用できます。また、そのクラスを持つすべての要素またはそのような要素内にあるすべての要素に対して本当に false を返したい場合は、次のようにします。

$('input,a,div').on('click', function(e) {
    if ( $(e.target).closest('.disabled').length ) return false;
});

編集：

上記のように、ハンドラーが委任されている場合は、次の例のように、後でイベント ハンドラーに追加されたクラスを除外できます。

//bind an event handler to all DIV element that does NOT have a .disabled class

$(document).on('click', 'div:not(.disabled)', function() {
    alert('ok');
});

// even if we add the class later, the event handler above will filter it out

$('.test').eq(1).addClass('disabled');

編集

于 2013-07-20T21:40:07.277 に答える
1

解決済み:

傍受の2つの方法を見つけました：

1)傍受ではありません。@adeneo が言ったとおり、.on(イベント ハンドラーをアタッチするときにテスト メソッドを使用できます。

$(document).on('click', 'div:not(.disabled)', function() {
    alert('ok');
});

詳細については彼の回答を参照し、これが役立つと思われる場合は彼の回答に賛成票を投じてください。

2）最初に実行するためにこのコードをトップに置くことができますが、DOMがレンダリングされるときに必ず追加してください：

$("a,div,input").click(function(event){
    if($(this).hasClass('disabled')){ 
       event.stopImmediatePropagation()
    }
});

これにより、既存の.click、.on('click'、および.live('click'ハンドラがすべて実行されなくなります。他のパラメータがない場合。

この解決策は、すでに大量のハンドラーがあり、それを書き換えたくない場合に適しています。 例

于 2013-07-20T23:04:56.793 に答える
0

疑似クラスを使用できます:disabled：

$('input:disabled,a:disabled,div:disabled').click(function() {

    return false;

});
于 2013-07-20T21:39:20.690 に答える