前端原生js长按事件

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

知止自律打卡-微信小程序APP

一款微信自律打卡小程序，支持自定义打卡项目、习惯记录、项目日记、专注计时与数据统计。自律打卡、学习打卡、读书打卡、健身打卡、运动打卡、减肥打卡、戒色打卡、养生打卡、戒烟、戒酒、戒熬夜等多种场景。万能打卡模板自由创建。可自定义每日打卡目标，记录习惯连续天数，可视化追踪成长进度。

了解产品详情 →

微信搜索「知止自律打卡」

代码案例

// 设定长按的时间阈值（毫秒）
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长按事件