0

所以现在，我正在使用hammer.js 将一些触摸控件绑定到页面上的元素。通过在元素上向右滑动，它将添加禁用类。如果任何项目有一个禁用的类，我想，基本上，“解除绑定”双击和滑动事件仅针对该类禁用的元素。有谁知道这是否可能？

$('.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')
    }

});

4

3 回答 3

1 
if ($this.hasClass('disabled')) return;
于 2012-04-16T22:05:34.997 回答
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')
    }
});
于 2012-04-16T22:05:48.880 回答
1

我建议使用内置于.on()方法中的 jQuery 事件委托。使用.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()选择器有点重。

于 2012-04-16T22:07:58.693 回答