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

下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用

百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样.

解决方案:参照这个链接地址

http://www.cnblogs.com/zhongxia/p/5410478.html

 

==========================================================

转: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: 人生没有失败，只有没到的成功。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhongxia/p/5376362.html