vue没有封装真正的长按事件,所以我们这里用@touchstart,@touchmove,@touchend事件来代替
<div class="friend" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="showDeleteButton()">
<canvas id="myCanvas" width="300" height="450"></canvas>
</div>
直接上代码,中间这里是用的是保存canvas的方法
let timeOutEvent = null //定时器
//长按事件设置定时器
let gtouchstart = () => {
timeOutEvent = setTimeout(() => {
longPress()
}, 700)
}
//手释放,如果在200毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
let showDeleteButton = () => {
clearTimeout(timeOutEvent); //清除定时器
if (timeOutEvent != 0) {
timeOutEvent = 0;
}
return false;
}
//如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
let gtouchmove = () => {
clearTimeout(timeOutEvent); //清除定时器
timeOutEvent = 0
}
//真正长按后应该执行的内容
let longPress = () => {
timeOutEvent = 0;
saveAsLocalImage();
}