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

我建議使用jQuery事件委託，這是建立到.on() method。使用.on()方法而不是.bind()。下面是一個例子，它假定行的父元素的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將針對該選擇器測試事件的目標元素。所以這會自動「解除」事件，因爲它們會停止匹配該選擇器！

如果你有很多行，我會把這個優先級稱作其他答案，這個答案在處理程序中對照類名進行測試;只綁定一個事件處理函數會更有效率。但是，如果只有很少的行，則只需在方法體中檢查.hasClass即可，因爲:not()選擇器有點重。