Question

我使用以下jQuery脚本添加“tap”支持。

(function($) {
    $.event.special.tap = {
        setup: function(data, namespaces) {
            var $elem = $(this);
            $elem.bind('touchstart', $.event.special.tap.handler)
                 .bind('touchmove', $.event.special.tap.handler)
                 .bind('touchend', $.event.special.tap.handler);
        },

        teardown: function(namespaces) {
            var $elem = $(this);
            $elem.unbind('touchstart', $.event.special.tap.handler)
                 .unbind('touchmove', $.event.special.tap.handler)
                 .unbind('touchend', $.event.special.tap.handler);
        },

        handler: function(event) {
            event.preventDefault();
            var $elem = $(this);
            $elem.data(event.type, 1);
            if (event.type === 'touchend' && !$elem.data('touchmove')) {
                // set event type to "tap"
                event.type = 'tap';
                // let $ handle the triggering of "tap" event handlers
                $.event.handle.apply(this, arguments);
            } else if ($elem.data('touchend')) {
                // reset our data attributes because our event is over
                $elem.removeData('touchstart touchmove touchend');
            }
        }
    };
})(jQuery);

我接下来要添加/删除一个类：

$('#thumb-tray-trigger').on('tap',function () {
    tap();
}); 

function tap() {
    $('#thumb-tray').toggleClass(function() {
        if ($(this).is('.close-tray')) {
            $(this).addClass('open-tray');
            $(this).removeClass('close-tray');
        } else {
           $(this).removeClass('open-tray');
           $(this).addClass('close-tray');      
        }
    });
}

我无法弄清楚为什么轻击手势只在第一次工作。任何后续的水龙头都不会做任何事情。

知道可能导致这种情况的原因吗？

Answer 1

尝试这样做以确保它只被触发一次：

$('#thumb-tray-trigger').on('tap',function () {
    tap();
}); 

function tap() {
    console.log("fired");
    $('#thumb-tray').toggleClass(function() {
        if ($(this).is('.close-tray')) {
            $(this).addClass('open-tray');
            $(this).removeClass('close-tray');
        } else {
           $(this).removeClass('open-tray');
           $(this).addClass('close-tray');      
        }
    });
}

然后检查javascript / dev控制台，查看“已解雇”的次数

jQuery点击只在第一次点击时工作

1 个答案: