1つの要素だけのstopPropagation（）

Question

今、私はhammer.jsを使っていくつかのタッチコントロールをページの要素にバインドしています。要素の右にスワイプすると、無効なクラスが追加されます。あるクラスに無効なクラスがある場合、そのクラスを無効にしている要素に対してのみダブルタップとswiperightイベントを "バインド解除"する必要があります。これが可能なら誰でも知っていますか？

$('.row').hammer({ 
    prevent_default: false, 
    drag_vertical: false 
}).bind('doubletap swiperight', function(e) { 
    var $this = $(this) 
    if (e.type == "doubletap") { 
     confirm("Do You Want To Edit Med?") 
    } 
    else if (e.type == "swiperight") { 
     $this.removeClass('yHighlight'); 
     $this.addClass('gHighlight disabled'); 
     $this.css('opacity','.5') 
    } 

}）;

Answer 1

イベントをトリガした要素にそのクラスが含まれているかどうかは、イベントハンドラ内から簡単に確認できます。もしそうなら、何もせずに戻る。

.bind('doubletap swiperight', function(e) { 
    var $this = $(this); 

    // ADDED CODE 
    if ($this.hasClass("disabled")) { 
     e.stopPropagation(); 
     return; 
    } 
    if (e.type == "doubletap") { 
     confirm("Do You Want To Edit Med?") 
    } 
    else if (e.type == "swiperight") { 
     $this.removeClass('yHighlight'); 
     $this.addClass('gHighlight disabled'); 
     $this.css('opacity','.5') 
    } 
}); 

Answer 2

if ($this.hasClass('disabled')) return; 

Answer 3

私は.on() methodに構築され、jQueryのイベントの委任を使用してお勧めしたいです。 .bind()の代わりに.on()メソッドを使用します。ここでは、行の親要素のIDが "rowparent"であることを前提とした例を示します。

('.row').hammer({ 
    prevent_default: false, 
    drag_vertical: false 
}); 

$('#rowparent').on('doubletap swiperight', '.row:not(.disabled)', function(e) { 
    var $this = $(this) 
    if (e.type == "doubletap") { 
     confirm("Do You Want To Edit Med?") 
    } 
    else if (e.type == "swiperight") { 
     $this.removeClass('yHighlight'); 
     $this.addClass('gHighlight disabled'); 
     $this.css('opacity','.5') 
    } 
}); 

.on方法は、任意選択の引数を取ります。 doubletapイベントまたはswiperightイベントが#rowparentまでバブルアップすると、jQueryはそのセレクタに対してイベントのターゲット要素をテストします。したがって、セレクタとのマッチングを停止するので、イベントを自動的に「アンバインド」します。

多くの行がある場合は、ハンドラー内のクラス名に対してテストするその他の答えを上位と呼びます。単一のイベントハンドラをバインドする方が効率的です。しかし、ほんのわずかの行しか持っていない場合は、:not()セレクタが少し重いので、メソッド本体の.hasClassでチェックするほうが効率的かもしれません。