<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<style>
/*防止长按选中文字*/
.testDiv{
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
</style>
</head>
<body>
<div>
<button class="longTap" onClick="console.log('tap')" >长按</button>
<div class="testDiv" style="height:60px;background:darkolivegreen" onclick="console.log(111)">hahahhahhahahahahhahhahahha</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vconsole@3.3.4/dist/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
class LongPress{
constructor(type,el, callback) {
this.callback = callback
this.type = type
this.el = document.querySelector(el);
this.timer = null;
this.startTimeStamp = null
this.endTimeStamp = null
this.init();
}
init() {
this.el.addEventListener('touchstart',(e)=>{
this.touchstart(e)
})
this.el.addEventListener('touchend',(e)=>{
this.touchend(e)
})
}
touchstart(e) {
console.log('touchstart',e)
// 清除默认行为
//e.preventDefault();
// 开启定时器
this.timer = setTimeout(() => {
if (typeof this.callback === 'function') {
this.callback();
} else {
console.error('callback is not a function!');
}
}, 700);
//记录start时间戳
this.startTimeStamp = e.timeStamp
}
touchend(e) {
console.log('touchend',e)
this.endTimeStamp = e.timeStamp
//console.log('end',this,this.timer,this.endTimeStamp-this.startTimeStamp)
// 清除默认行为
//e.preventDefault();
// 清除定时器
clearTimeout(this.timer);
}
}
new LongPress('longtap','.longTap',function () {
console.log('long pressing....')
})
new LongPress('longtap','.testDiv',function () {
console.log(1234556)
})
/*class Person{//定义了一个名字为Person的类
constructor(name,age){//constructor是一个构造方法，用来接收参数
this.name = name;//this代表的是实例对象
this.age=age;
}
say(){//这是一个类的方法，注意千万不要加上function
return "我的名字叫" + this.name+"今年"+this.age+"岁了";
}
}
var obj=new Person("laotie",88);
console.log(obj.say());//我的名字叫laotie今年88岁了*/
</script>
</body>
</html>
网友评论