JavaScript 实现长按功能:使用 touchstart 和 touchend 事件
可以通过以下方法实现长按功能:
-
使用
touchstart事件监听手指在屏幕上的触摸动作,并通过setTimeout()函数延迟一段时间后执行某个操作。 -
在
touchend事件中清除setTimeout()函数,即取消长按操作。 -
在
touchmove事件中判断手指的移动距离,如果超过一定范围则取消长按操作。 -
可以通过设置一个全局变量来判断是否处于长按状态,以便在其他地方使用。
以下是一个简单的示例代码:
var timer; // 定义一个全局变量
var isLongPress = false; // 是否处于长按状态
document.addEventListener('touchstart', function(e) {
timer = setTimeout(function() {
isLongPress = true;
// 执行长按操作
}, 1000); // 设置长按时间为1秒
});
document.addEventListener('touchend', function(e) {
clearTimeout(timer);
if (isLongPress) {
isLongPress = false;
// 取消长按操作
}
});
document.addEventListener('touchmove', function(e) {
clearTimeout(timer);
isLongPress = false;
});
原文地址: https://www.cveoy.top/t/topic/mOkY 著作权归作者所有。请勿转载和采集!