哪个网站做照片书最好,免费网站模版下载,申请公司邮箱,成都网站建设策划简单说一下原理
首先介绍三个针对触摸屏设备的事件#xff0c;分别是#xff1a;
touchstart#xff1a;当手指触摸屏幕时触发#xff0c;即触摸开始的时候#xff1b;touchend#xff1a;当手指离开屏幕时触发#xff0c;即触摸结束的时候#xff1b;touchcancel分别是
touchstart当手指触摸屏幕时触发即触摸开始的时候touchend当手指离开屏幕时触发即触摸结束的时候touchcancel当触摸事件被取消时触发例如手指移出了触摸区域或者系统强制取消了触摸事件。
那么长按事件原理的大致逻辑伪代码就如下
touchstart当手指触摸屏幕时触发即触摸开始的时候
{启动一个定时任务事件在 500 毫秒后执行
}ouchend当手指离开屏幕时触发即触摸结束的时候
【并且】
touchcancel当触摸事件被取消时触发例如手指移出了触摸区域或者系统强制取消了触摸事件
{ 如果前面的定时任务事件还没触发那么清空该定时任务
}你说有点抽象那先自己看看代码运行两遍研究一下
代码直接用
直接上代码马上使用
templateviewtouchstarthandleTouchStarttouchendhandleTouchEndtouchcancelhandleTouchCancelslot/slot !-- Allows content to be inserted --/view
/templatescript setup langts
import { ref, onUnmounted, inject,defineProps } from vueconst props defineProps({onLongPress:{type: Function,required: true}
})const timer refnumber | null(null);const handleTouchStart () {// Clear existing timer if it existsif (timer.value) clearTimeout(timer.value);// Set a new timertimer.value setTimeout(() {console.log(props)props.onLongPress();}, 500); // Trigger after 500 ms
};const clearTimer () {// Clear the timer when touch ends or is cancelledif (timer.value) {clearTimeout(timer.value);timer.value null;}
};const handleTouchEnd () {clearTimer();
};const handleTouchCancel () {clearTimer();
};onUnmounted(() {// Ensure no timers are left runningclearTimer();
});
/script
父组件使用调用示例
k-long-press-view :on-long-presshandleLongPressview stylemin-height: 50rpx;长按触发/view
/k-long-press-viewscript setup langts
function handleLongPress() {console.log(长按触发)
}
/script
