<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let oBox = document.querySelector("#box")
tap(oBox, function (e) {
console.log(e); // 利用的touchend的事件对象
console.log('哈哈 自定义的tap事件触发啦');
})
// 移动端原生没有一个完成的点按事件 click: 完整的点击 默认300ms延迟 用户体验不好
// 点按事件 tap 延迟要短/快 150ms 中间不能有滑动
function tap(obj, callback) {
let flag = false;
let startTime = 0;
// 1 严格判断一下dom元素是否存在 并且是一个对象
if (obj && typeof obj === "object") {
obj.addEventListener("touchstart", function () {
//还原flag
flag = false
// 当手指按下的时候 计时
startTime = Date.now()
})
obj.addEventListener("touchmove", function () {
flag = true;
console.log("阻止tap");
})
obj.addEventListener("touchend", function (e) {
// console.log('手指离开屏幕啦');
if (!flag && (Date.now() - startTime) < 150) {
// 这就是一个完整的点按事件
// 调用回调函数
(typeof callback === "function") && callback.call(obj, e)
console.log("tap触发了");
}
})
}
}
// 参考代码
// oBox.addEventListener('touchstart', function () {
// console.log('手指开始触摸啦');
// })
// oBox.addEventListener('touchmove', function () {
// console.log('手指正在滑动');
// })
// oBox.addEventListener('touchend', function () {
// console.log('手指离开屏幕啦');
// })
// oBox.addEventListener('click', function () {
// console.log('点击啦');
// })
</script>
</body>
</html>