Question

现在，我正在使用hammer.js将一些触摸控件绑定到页面上的元素。通过在元素上向右滑动，它将添加禁用类。如果任何项目都有一个禁用类，我想基本上“取消绑定”doubletap和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

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

Answer 2

您可以从事件处理程序内部检查触发事件的元素是否具有该类;如果确实如此，则不做任何事情就返回。

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

stopPropagation（）仅适用于一个元素

3 个答案: