<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手势事件</title>
<style>
.box {
width: 320px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
window.onload=function () {
var box=document.querySelector('.box');
var bindSwipeEvent=function (dom,fn) {
var startDate=null;
var bolMove=false;
dom.addEventListener('touchstart',function (e) {
/*开始触摸*/
startDate=Date.now();
});
dom.addEventListener('touchmove',function (e) {
/*触摸移动*/
bolMove=true;
});
dom.addEventListener('touchend',function (e) {
/* 因为是手指点击，所以速度会快，并且没有触摸的事件产生 */
if ((Date.now()-startDate) <150 && !bolMove) {
fn && fn.call(this,e)
}
bolMove=false;
startDate=null;
});
}
bindSwipeEvent(box,function (e) {
console.log("tap事件"+this+e);
});
}
</script>
</body>
</html>
05-04
3139
3139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
