js移动端滑动事件

 1 <div id="box" style="width:100%;height:100%;border:1px solid red;"></div>
 2
 3 <script>
 4     //定义变量,用于记录坐标和角度
 5     var startx,starty,movex,movey,endx,endy,nx,ny,angle;
 6     //开始触摸函数,event为触摸对象
 7     function touchs(event){
 8         event.preventDefault();//阻止浏览器默认滚动事件
 9         var box = document.getElementById(‘box‘);//获取DOM标签
10         if(event.type=="touchstart"){//通过if语句判断event.type执行了哪个触摸事件
11             console.log(‘开始‘);
12             var touch = event.touches[0];//获取开始的位置数组的第一个触摸位置
13             startx = Math.floor(touch.pageX);//获取第一个坐标的X轴
14             starty = Math.floor(touch.pageY);//获取第一个坐标的Y轴
15         }else if(event.type=="touchmove"){//触摸中的坐标获取
16             console.log(‘滑动中‘);
17             var touch = event.touches[0];
18             movex = Math.floor(touch.pageX);
19             movey = Math.floor(touch.pageY);
20         }else if(event.type == "touchend" || event.type == "touchcancel"){//当手指离开屏幕或系统取消触摸事件的时候
21             endx = Math.floor(event.changedTouches[0].pageX);//获取最后的坐标位置
22             endy = Math.floor(event.changedTouches[0].pageY);
23             console.log(‘结束‘);
24             nx = endx-startx;//获取开始位置和离开位置的距离
25             ny = endy-starty;
26             //通过坐标计算角度公式 Math.atan2(y,x)*180/Math.PI
27             angle = Math.atan2(ny, nx) * 180 / Math.PI;
28             if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){
29                 return false;
30                 console.log(‘滑动距离太小‘);
31             }
32             //通过滑动的角度判断触摸的方向
33             if(angle<45 && angle>=-45){
34                 alert(‘右滑动‘);
35                 return false;
36             }else if(angle<135 && angle>=45){
37                 alert(‘下滑动‘);
38                 return false;
39             }else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){
40                 alert(‘左滑动‘);
41                 return false;
42             }else if(angle<=-45 && angle >=-135){
43                 alert(‘上滑动‘);
44                 return false;
45             }
46         }
47     }
48
49     //添加触摸事件的监听,并直行自定义触摸函数
50     box.addEventListener(‘touchstart‘,touchs,false);
51     box.addEventListener(‘touchmove‘,touchs,false);
52     box.addEventListener(‘touchend‘,touchs,false);
53
54 </script>

原文地址:https://www.cnblogs.com/webwrangler/p/8920397.html

时间: 2024-10-07 06:21:12

js移动端滑动事件的相关文章

移动端滑动事件

   安卓webview下使用zepto的swipe时遇到的问题    (使用zepto的swipe时必须引用touch.js,不然很多移动端浏览器swipe会失灵.) 我想要用swipeLeft/swipeRight监听向左向右滑动事件,如果只是单纯为元素增加swipeLeft/swipeRight事件的话在webview下是不生效的,如果这个页面不需要上下滑动的话,完全可以用 $('body').bind("touchmove", function(e) { e.preventDe

js移动端tap事件封装

这几天做项目,发现移动端需要触摸事件,而click肯定是不行的,于是我对tap事件封装进行了搜索,找到了一篇文章,原文地址如下:http://www.jb51.net/article/50663.htm, 我对其中第一个封装加了一点东西,把它封装在一个函数里面,使用的时候直接调用即可,源代码如下(tap.js): function tap(ele, fn){ var startTx, startTy; var endTx, endTy; ele.addEventListener( 'touchs

js移动端click事件延迟

今天做一个移动端网站,一块内容中包含两个js效果,一直以为是冲突,导致只能使用一个,后面发现是click事件延迟引起,解决代码如下:(function(){        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';    if(!$.fn.quickOn){            $.fn.quickOn= function(){                argum

原生js移动端touch事件实现上拉加载更多

大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: 1 //获取要操作的元素 2 var objSection = document.getElementsByTagName("div")[0]; 3 //给元素绑定监听事件 个人习惯把监听事件写在一块 4 objSection.addEventListener("touchstart", touchStart, false); 5 objSect

js移动客户端-----取消滑动事件(亲测好用)

现在做的响应式网站,遇到一问题: 网站头上的侧边栏点开始,向下滑动会出现空白,于是,想到要把body禁止滑动 网上搜了很多办法,也不好用 注意: 手指在滑动整个屏幕时,会影响浏览器的行为,比如滚动和缩放.所以在调用touch事件时,要注意禁止缩放和滚动. 1.禁止缩放 通过meta元标签来设置. <meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

js触屏滑动事件

var answerBar=document.getElementById("answerSelect");var start_left;var end_left;answerBar.addEventListener("touchstart",function(event){    event.preventDefault();    if (event.targetTouches.length == 1) {        var touch = event.ta

关于移动端滑动手势

背景: 基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看了诸多例子和对于移动端手势知识点梳理的技术博客才对做到了对功能的实现.并且也在这个过程中,才初步了解到了移动端框架Zepto.js._(:з」∠)_ 当然,最后还是选择了尽量用原生来实现这一个功能,只因为这样才能够对整个功能实现原理理解上更充分些,想尽量少依赖于插件.不过到了数据加载上,因为时间成本等原因最后还是用上了

&#31227;&#21160;&#31471;&#19978;&#19979;&#28369;&#21160;&#20107;&#20214;&#20043;--&#22353;&#29241;&#30340;touch.js

转:http://blog.csdn.net/minidrupal/article/details/39611605?utm_source=tuicool&utm_medium=referral 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩。 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画。 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动

移动端上下滑动事件之--坑爹的touch.js

原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面,坑爹的touch.js的上下滑动( swipe )事件失效. 在举例之前,先科普一下如何在pc端,查看h