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()选择器有点重。