当前位置：首页 > JavaScript

js实现长按

2026-03-14 06:04:02JavaScript

监听触摸或鼠标事件

使用 touchstart 或 mousedown 事件开始计时，touchend 或 mouseup 事件结束计时。若按住时间超过设定阈值（如 500ms），则触发长按操作。

let pressTimer;

element.addEventListener('mousedown', startPressTimer);
element.addEventListener('mouseup', cancelPressTimer);
element.addEventListener('mouseleave', cancelPressTimer);

element.addEventListener('touchstart', startPressTimer);
element.addEventListener('touchend', cancelPressTimer);

function startPressTimer(e) {
    e.preventDefault(); // 防止移动端触发默认行为（如滚动）
    pressTimer = setTimeout(() => {
        console.log('长按触发');
        // 执行长按逻辑
    }, 500); // 500ms 阈值
}

function cancelPressTimer() {
    clearTimeout(pressTimer);
}

处理移动端与桌面端兼容性

移动端需通过 touchstart 和 touchend 监听，桌面端则用 mousedown 和 mouseup。注意阻止移动端默认行为（如页面滚动）。

优化长按逻辑

添加长按触发后的回调函数，支持自定义操作：

function startPressTimer(e, callback) {
    pressTimer = setTimeout(() => {
        callback(); // 触发自定义回调
    }, 500);
}

// 调用示例
startPressTimer(e, () => {
    console.log('自定义长按操作');
});

防止误触

在 touchmove 或 mousemove 时取消长按，避免拖动误触发：

element.addEventListener('touchmove', cancelPressTimer);
element.addEventListener('mousemove', cancelPressTimer);

完整示例

以下是一个完整的长按实现，兼容移动端和桌面端：

js实现长按

const element = document.getElementById('long-press-target');
let pressTimer;

const startPressTimer = (e, callback) => {
    e.preventDefault();
    pressTimer = setTimeout(callback, 500);
};

const cancelPressTimer = () => {
    clearTimeout(pressTimer);
};

// 桌面端事件
element.addEventListener('mousedown', (e) => {
    startPressTimer(e, () => {
        console.log('桌面端长按触发');
    });
});
element.addEventListener('mouseup', cancelPressTimer);
element.addEventListener('mouseleave', cancelPressTimer);
element.addEventListener('mousemove', cancelPressTimer);

// 移动端事件
element.addEventListener('touchstart', (e) => {
    startPressTimer(e, () => {
        console.log('移动端长按触发');
    });
});
element.addEventListener('touchend', cancelPressTimer);
element.addEventListener('touchmove', cancelPressTimer);