码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2016-04-11 00:07:50      阅读：679      评论：0      收藏：0      [点我收藏+]

标签：

转:http://blog.csdn.net/minidrupal/article/details/39611605?utm_source=tuicool&utm_medium=referral

移动端页面的盛行，微信的便利的页面推广等等，让越来越多的css3效果和html5在手机端大放异彩。

于是乎，各式各样的简约酷炫的html5页面层出不穷，最多的就是视差滚动+css3动画。

接下来就说说自己在搞这些页面里面碰到的一个小问题-------zepto.js里面，坑爹的touch.js的上下滑动（swipe）事件失效。

 

在举例之前，先科普一下如何在pc端，查看html5页面在各种分辨率的手机的展示情况。

最常见的就是利用谷歌的手机模拟器。

 

步骤1：打开谷歌浏览器，按F12.

步骤2：然后按截图里面的步骤，选择各种分辨率，在刷新一下页面，就可以看到效果。

技术分享

注：各种手机的选择

技术分享

 

开始描述问题之前，先提供几个网址，

让你们试试能不能看到效果。

 

 
 
 
能在谷歌模拟器看到不同分辨率的效果。截几个图看一下。
 
技术分享技术分享
 
技术分享技术分享
 
 
好了，进入正题。
做这类html5页面，最主要的事件就是滑动事件。
分别是左右滑动和上下滑动。
说到这里，可能很多人都会脱口而出。用zepto.js就可以简单搞定啦。
 
我也是这么想的。于是很快的，就用zepto.js加上它的touch组件，touch.js实现了相应的效果。
在谷歌浏览器的模拟器也能很好的兼容。
 
后来放上测试服务器，用手机一看，问题来了！！！！
手机上的uc，腾讯，微信自带浏览器，QQ自带浏览器器，苹果系统的浏览器，安卓的原生浏览器，上下滑动的事件都失效！
只有谷歌浏览器是有事件相应的。坑爹啊！！！！
 
zepto.js用的人估计不少，想不到touch.js竟然兼容这么差，还是我打开的方式不对？！！！
这里就不贴这个js里面的代码出来了。
 
遇到问题，只好寻求其他解决方法。
解决方法先列几个吧。
第一个：jquery mobile里面的touch组件。
第二个：百度的童鞋们实现的touch.js.网址也贴一下吧：http://touch.code.baidu.com/
 
第三个就是技术群里面的一些童鞋提供，亲测是有效的：
 
[javascript] view plain copy

  1. (function($) {  
  2.     var options, Events, Touch;  
  3.     options = {  
  4.         x: 20,  
  5.         y: 20  
  6.     };  
  7.     Events = [‘swipe‘, ‘swipeLeft‘, ‘swipeRight‘, ‘swipeUp‘, ‘swipeDown‘, ‘tap‘, ‘longTap‘, ‘drag‘];  
  8.     Events.forEach(function(eventName) {  
  9.         $.fn[eventName] = function() {  
  10.             var touch = new Touch($(this), eventName);  
  11.             touch.start();  
  12.             if (arguments[1]) {  
  13.                 options = arguments[1]  
  14.             }  
  15.             return this.on(eventName, arguments[0])  
  16.         }  
  17.     });  
  18.     Touch = function() {  
  19.         var status, ts, tm, te;  
  20.         this.target = arguments[0];  
  21.         this.e = arguments[1]  
  22.     };  
  23.     Touch.prototype.framework = function(e) {  
  24.         e.preventDefault();  
  25.         var events;  
  26.         if (e.changedTouches) events = e.changedTouches[0];  
  27.         else events = e.originalEvent.touches[0];  
  28.         return events  
  29.     };  
  30.     Touch.prototype.start = function() {  
  31.         var self = this;  
  32.         self.target.on("touchstart",  
  33.         function(event) {  
  34.             event.preventDefault();  
  35.             var temp = self.framework(event);  
  36.             var d = new Date();  
  37.             self.ts = {  
  38.                 x: temp.pageX,  
  39.                 y: temp.pageY,  
  40.                 d: d.getTime()  
  41.             }  
  42.         });  
  43.         self.target.on("touchmove",  
  44.         function(event) {  
  45.             event.preventDefault();  
  46.             var temp = self.framework(event);  
  47.             var d = new Date();  
  48.             self.tm = {  
  49.                 x: temp.pageX,  
  50.                 y: temp.pageY  
  51.             };  
  52.             if (self.e == "drag") {  
  53.                 self.target.trigger(self.e, self.tm);  
  54.                 return  
  55.             }  
  56.         });  
  57.         self.target.on("touchend",  
  58.         function(event) {  
  59.             event.preventDefault();  
  60.             var d = new Date();  
  61.             if (!self.tm) {  
  62.                 self.tm = self.ts  
  63.             }  
  64.             self.te = {  
  65.                 x: self.tm.x - self.ts.x,  
  66.                 y: self.tm.y - self.ts.y,  
  67.                 d: (d - self.ts.d)  
  68.             };  
  69.             self.tm = undefined;  
  70.             self.factory()  
  71.         })  
  72.     };  
  73.     Touch.prototype.factory = function() {  
  74.         var x = Math.abs(this.te.x);  
  75.         var y = Math.abs(this.te.y);  
  76.         var t = this.te.d;  
  77.         var s = this.status;  
  78.         if (x < 5 && y < 5) {  
  79.             if (t < 300) {  
  80.                 s = "tap"  
  81.             } else {  
  82.                 s = "longTap"  
  83.             }  
  84.         } else if (x < options.x && y > options.y) {  
  85.             if (t < 250) {  
  86.                 if (this.te.y > 0) {  
  87.                     s = "swipeDown"  
  88.                 } else {  
  89.                     s = "swipeUp"  
  90.                 }  
  91.             } else {  
  92.                 s = "swipe"  
  93.             }  
  94.         } else if (y < options.y && x > options.x) {  
  95.             if (t < 250) {  
  96.                 if (this.te.x > 0) {  
  97.                     s = "swipeLeft"  
  98.                 } else {  
  99.                     s = "swipeRight"  
  100.                 }  
  101.             } else {  
  102.                 s = "swipe"  
  103.             }  
  104.         }  
  105.         if (s == this.e) {  
  106.             this.target.trigger(this.e);  
  107.             return  
  108.         }  
  109.     }  
  110. })(window.jQuery || window.Zepto);  


总结：为什么要把这个作为一篇博客发出去，就是因为之前碰到这个问题的时候，问度娘问谷歌都很少答案。所以把这个小问题说出来，让碰到类似问题的童鞋，能够有一些启发。
 
 
 
 

Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。

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

标签：

原文地址：http://www.cnblogs.com/zhongxia/p/5376362.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！