当前位置：首页 > jquery

jquery长按事件

2026-02-04 02:39:39jquery

jQuery 长按事件实现方法

在 jQuery 中实现长按事件可以通过组合 mousedown 和 mouseup 或 touchstart 和 touchend 事件来实现。以下是几种常见的实现方式：

使用 setTimeout 检测长按

通过设置定时器来检测用户按住元素的时间是否达到长按阈值。

var pressTimer;

$("#target").on('mousedown touchstart', function(e) {
    pressTimer = setTimeout(function() {
        // 长按事件处理逻辑
        console.log("长按事件触发");
    }, 1000); // 设置长按时间为 1000 毫秒
}).on('mouseup mouseleave touchend', function() {
    clearTimeout(pressTimer);
});

使用自定义事件

可以封装一个长按事件插件，方便重复使用。

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

    this.on('mousedown touchstart', function(e) {
        timer = setTimeout(fn.bind(this, e), duration);
    }).on('mouseup mouseleave touchend', function() {
        clearTimeout(timer);
    });

    return this;
};

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

处理移动端触摸事件

对于移动端设备，需要使用 touchstart 和 touchend 事件。

var pressTimer;

$("#target").on('touchstart', function(e) {
    pressTimer = setTimeout(function() {
        // 长按事件处理逻辑
        console.log("长按事件触发");
    }, 1000);
}).on('touchend touchcancel', function() {
    clearTimeout(pressTimer);
});

防止长按触发默认行为

在某些情况下，长按可能会触发浏览器的默认行为（如文本选择或上下文菜单），可以通过阻止默认行为来避免。

$("#target").on('mousedown touchstart', function(e) {
    e.preventDefault();
    pressTimer = setTimeout(function() {
        console.log("长按事件触发");
    }, 1000);
}).on('mouseup mouseleave touchend', function() {
    clearTimeout(pressTimer);
});