CSS
/*去除长按出现的文字复制影响*/
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
html
<div class="main_content" @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend">
methods
长按会与短按 冲突 可定义一个状态进行区分
isclick:true, 每次数据刷新 都为true
islongClick:false,
/**
* @Description: 长按事件
*/
gotouchstart() {
this.islongClick = true
clearTimeout(this.timeOut);
this.timeOut = setTimeout(function () {
//that.actionSheetShow=true;//修改删除弹窗出现
console.log('在这里执行长按事件');
this.islongClick = false;
this.isclick=false;
}, 1000);
},
/**
* @Description: 短按事件————手释放,如果在1000毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件
*/
gotouchend() {
clearTimeout(this.timeOut)
if ( this.isclick) {
console.log('短按就行了');
}
},
/**
* @Description: 如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按
*/
gotouchmove() {
this.islongClick= false;
this.isclick=false;
console.log('手指移动了');
clearTimeout(this.timeOut);
},
// 项目销毁前清除定时器
beforeDestroy() {
this.islongClick= false;
this.isclick=false;
clearTimeout(this.timeOut);
},