前端原生js长按事件

有勇气的牛排 392 前端 2024-10-26 12:11:01

代码案例

// 设定长按的时间阈值（毫秒）
const longPressDuration = 3000;

function setupLongPress(element, callback) {
    let timer;
    
    const startPress = (event) => {
        event.preventDefault(); // 阻止默认行为
        timer = setTimeout(() => callback(element.id), longPressDuration);
    };
    
    const cancelPress = (event) => {
        event.preventDefault(); // 阻止默认行为
        clearTimeout(timer);
    };
    
    // 添加事件监听
    element.addEventListener('mousedown', startPress);
    element.addEventListener('mouseup', cancelPress);
    element.addEventListener('mouseleave', cancelPress);
    
    // 触屏设备支持
    element.addEventListener('touchstart', startPress);
    element.addEventListener('touchend', cancelPress);
    element.addEventListener('touchcancel', cancelPress);
}


const targetElement = document.getElementById('phil');
setupLongPress(targetElement, (id) => {
    location.href = "https://www.couragesteak.com/"
});

<h2><a id="_0"></a>代码案例</h2> <pre><div class="hljs"><code class="lang-js">// 设定长按的时间阈值（毫秒） const longPressDuration = 3000; function setupLongPress(element, callback) { let timer; const startPress = (event) => { event.preventDefault(); // 阻止默认行为 timer = setTimeout(() => callback(element.id), longPressDuration); }; const cancelPress = (event) => { event.preventDefault(); // 阻止默认行为 clearTimeout(timer); }; // 添加事件监听 element.addEventListener('mousedown', startPress); element.addEventListener('mouseup', cancelPress); element.addEventListener('mouseleave', cancelPress); // 触屏设备支持 element.addEventListener('touchstart', startPress); element.addEventListener('touchend', cancelPress); element.addEventListener('touchcancel', cancelPress); } const targetElement = document.getElementById('phil'); setupLongPress(targetElement, (id) => { location.href = "https://www.couragesteak.com/" }); </code></div></pre>

前端 原生js长按事件

代码案例

留言

前端原生js长按事件