当前位置：首页 > jquery

jquery长按事件

2026-03-16 23:26:46jquery

监听长按事件的方法

使用jQuery实现长按事件可以通过结合mousedown和mouseup事件，并设置定时器来判断是否达到长按时间阈值。

$(element).on('mousedown', function() {
    var longPressTimer = setTimeout(function() {
        // 长按事件处理逻辑
        console.log('长按事件触发');
    }, 1000); // 设置长按时间阈值为1000毫秒

    $(this).on('mouseup mouseleave', function() {
        clearTimeout(longPressTimer); // 取消定时器
        $(this).off('mouseup mouseleave'); // 移除事件监听
    });
});

移动端兼容性处理

在移动设备上，需要使用touchstart和touchend事件代替mousedown和mouseup。

$(element).on('touchstart', function() {
    var longPressTimer = setTimeout(function() {
        // 长按事件处理逻辑
        console.log('长按事件触发');
    }, 1000);

    $(this).on('touchend touchcancel', function() {
        clearTimeout(longPressTimer);
        $(this).off('touchend touchcancel');
    });
});

封装为可复用的jQuery插件

将长按事件封装为jQuery插件，方便在多个地方调用。

(function($) {
    $.fn.longPress = function(callback, duration) {
        var timeout;
        duration = duration || 1000;

        this.on('mousedown touchstart', function() {
            timeout = setTimeout(callback, duration);

            $(this).on('mouseup touchend touchcancel mouseleave', function() {
                clearTimeout(timeout);
                $(this).off('mouseup touchend touchcancel mouseleave');
            });
        });

        return this;
    };
})(jQuery);

// 使用方式
$('#target').longPress(function() {
    console.log('长按事件触发');
}, 1500);

防止重复触发

为避免长按事件重复触发，可以在事件触发后禁用事件监听，直到下一次交互。

jquery长按事件

$(element).on('mousedown touchstart', function() {
    var timer = setTimeout(function() {
        // 触发后移除事件监听
        $(element).off('mouseup touchend');
        console.log('长按事件触发');
    }, 1000);

    $(this).on('mouseup touchend', function() {
        clearTimeout(timer);
    });
});