原生js左右滑动

最新推荐文章于 2024-06-30 15:38:14 发布

上海菜鸡毛

最新推荐文章于 2024-06-30 15:38:14 发布

阅读量5.2k

点赞数

分类专栏：前端

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<style type="text/css">
.box{
width:100%;
height: 100%;
position: fixed;
margin:auto;
top: 0;
left: 0;
right:0;
bottom: 0;
background: red;
opacity: 0.6;
color: black;
}
</style>
<body>
<div class="box" id="box">dssdfsdfsdffffffffffffffffffffffffffffffffs</div>
</body>
<script type="text/javascript">
function _touch(){
var startx;//让startx在touch事件函数里是全局性变量。
var endx;
var el=document.getElementById('box');
function cons(){ //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
console.log(starty,endy);
//var l=Math.abs(startx-endx);
//var h=Math.abs(starty-endy);
//if(l>h){
//x事件
//if(startx>endx){
//alert('left');
//}else{
//alert('right');
//}
//}else{
//y事件
//if(starty>endy){
//alert('top');
//}else{
//alert('bottom');
//}
//}
if(startx>endx){ //判断左右移动程序
alert('left');
}else{
alert('right');
}
}
el.addEventListener('touchstart',function(e){
var touch=e.changedTouches;
startx=touch[0].clientX;
starty=touch[0].clientY;
});
el.addEventListener('touchend',function(e){
var touch=e.changedTouches;
endx=touch[0].clientX;
endy=touch[0].clientY;
cons(); //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
});
}
_touch()
</script>
</html>