移動端上下滑動事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605php
移動端頁面的盛行，微信的便利的頁面推廣等等，讓愈來愈多的css3效果和html5在手機端大放異彩。css
因而乎，各式各樣的簡約酷炫的html5頁面層出不窮，最多的就是視差滾動+css3動畫。html
接下來就說說本身在搞這些頁面裏面碰到的一個小問題-------zepto.js裏面，坑爹的touch.js的上下滑動（ swipe ）事件失效。前端
在舉例以前，先科普一下如何在pc端，查看html5頁面在各類分辨率的手機的展現狀況。html5
最多見的就是利用谷歌的手機模擬器。jquery
步驟1：打開谷歌瀏覽器，按F12.css3
步驟2：而後按截圖裏面的步驟，選擇各類分辨率，在刷新一下頁面，就能夠看到效果。瀏覽器
注：各類手機的選擇服務器
開始描述問題以前，先提供幾個網址，微信
讓大家試試能不能看到效果。
http://crbrsfadev.crc.com.cn:8080/zhaopin/index.htm?from=singlemessage&isappinstalled=0
http://zhaopin.jd.com/wechat/index.html?from=singlemessage&isappinstalled=0
http://zhaopin.jd.com/h5/index.html?from=singlemessage&isappinstalled=0
能在谷歌模擬器看到不一樣分辨率的效果。截幾個圖看一下。
好了，進入正題。
作這類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/
第三個就是技術羣裏面的一些童鞋提供，親測是有效的：
(function($) {
var options, Events, Touch; options = { x: 20, y: 20 }; Events = ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'tap', 'longTap', 'drag']; Events.forEach(function(eventName) { $.fn[eventName] = function() { var touch = new Touch($(this), eventName); touch.start(); if (arguments[1]) { options = arguments[1] } return this.on(eventName, arguments[0]) } }); Touch = function() { var status, ts, tm, te; this.target = arguments[0]; this.e = arguments[1] }; Touch.prototype.framework = function(e) { e.preventDefault(); var events; if (e.changedTouches) events = e.changedTouches[0]; else events = e.originalEvent.touches[0]; return events }; Touch.prototype.start = function() { var self = this; self.target.on("touchstart", function(event) { event.preventDefault(); var temp = self.framework(event); var d = new Date(); self.ts = { x: temp.pageX, y: temp.pageY, d: d.getTime() } }); self.target.on("touchmove", function(event) { event.preventDefault(); var temp = self.framework(event); var d = new Date(); self.tm = { x: temp.pageX, y: temp.pageY }; if (self.e == "drag") { self.target.trigger(self.e, self.tm); return } }); self.target.on("touchend", function(event) { event.preventDefault(); var d = new Date(); if (!self.tm) { self.tm = self.ts } self.te = { x: self.tm.x - self.ts.x, y: self.tm.y - self.ts.y, d: (d - self.ts.d) }; self.tm = undefined;