当前位置：首页 > JavaScript

js实现长按

2026-02-01 07:33:44JavaScript

实现长按功能的方法

使用JavaScript实现长按功能可以通过监听mousedown、touchstart、mouseup、touchend等事件来实现。以下是具体实现方法：

方法一：使用定时器

在mousedown或touchstart事件中启动一个定时器，如果在指定时间内没有触发mouseup或touchend事件，则视为长按。

js实现长按

let pressTimer;

const element = document.getElementById('longPressElement');

element.addEventListener('mousedown', startPressTimer);
element.addEventListener('touchstart', startPressTimer);

element.addEventListener('mouseup', cancelPressTimer);
element.addEventListener('touchend', cancelPressTimer);

function startPressTimer(e) {
    e.preventDefault(); // 防止默认行为，如触摸时滚动
    pressTimer = setTimeout(() => {
        console.log('长按事件触发');
        // 在这里执行长按后的操作
    }, 1000); // 设置长按时间为1000毫秒
}

function cancelPressTimer() {
    clearTimeout(pressTimer);
}

方法二：使用自定义事件

通过自定义事件来封装长按逻辑，提高代码的可复用性。

js实现长按

const element = document.getElementById('longPressElement');
let pressTimer;

element.addEventListener('mousedown', (e) => {
    pressTimer = setTimeout(() => {
        const longPressEvent = new CustomEvent('longpress', {
            bubbles: true,
            cancelable: true
        });
        e.target.dispatchEvent(longPressEvent);
    }, 1000);
});

element.addEventListener('mouseup', () => {
    clearTimeout(pressTimer);
});

element.addEventListener('longpress', (e) => {
    console.log('长按事件触发');
    // 在这里执行长按后的操作
});

方法三：支持触摸设备

为了兼容触摸设备，需要同时监听touchstart和touchend事件。

const element = document.getElementById('longPressElement');
let pressTimer;

element.addEventListener('mousedown', startTimer);
element.addEventListener('touchstart', startTimer);

element.addEventListener('mouseup', cancelTimer);
element.addEventListener('mouseleave', cancelTimer);
element.addEventListener('touchend', cancelTimer);

function startTimer(e) {
    e.preventDefault();
    pressTimer = setTimeout(() => {
        console.log('长按事件触发');
        // 在这里执行长按后的操作
    }, 1000);
}

function cancelTimer() {
    clearTimeout(pressTimer);
}