移动端页面的盛行，微信的便利的页面推广等等，让越来越多的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.网址也贴一下吧：
第三个就是技术群里面的一些童鞋提供，亲测是有效的：
(function($) {
var options, Events, T
options = {
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,
this.target = arguments[0];
this.e = arguments[1]
Touch.prototype.framework = function(e) {
e.preventDefault();
if (e.changedTouches) events = e.changedTouches[0];
else events = e.originalEvent.touches[0];
return events
Touch.prototype.start = function() {
var self =
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);
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.factory()
Touch.prototype.factory = function() {
var x = Math.abs(this.te.x);
var y = Math.abs(this.te.y);
var t = this.te.d;
var s = this.
if (x & 5 && y & 5) {
if (t & 300) {
s = "longTap"
} else if (x & options.x && y & options.y) {
if (t & 250) {
if (this.te.y & 0) {
s = "swipeDown"
s = "swipeUp"
s = "swipe"
} else if (y & options.y && x & options.x) {
if (t & 250) {
if (this.te.x & 0) {
s = "swipeLeft"
s = "swipeRight"
s = "swipe"
if (s == this.e) {
this.target.trigger(this.e);
})(window.jQuery || window.Zepto);
总结：为什么要把这个作为一篇博客发出去，就是因为之前碰到这个问题的时候，问度娘问谷歌都很少答案。所以把这个小问题说出来，让碰到类似问题的童鞋，能够有一些启发。
Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败，只有没到的成功。
阅读(...) 评论()所有回答(2)
zepto要引入 touch.js模块 官网上是没有的 去github下载 然后引入 touch.js即可
document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false);
加上这句试试？
&&&您需要以后才能回答，未注册用户请先。共被编辑 3 次
页面中使用了zepto的swipeLeft和swipeRight方法，上下滑动的时候也会误触发左右滑动事件
要实现的效果：右滑动切换到评价页面左滑动切换简介页面
$(document).swipeLeft(function(){
$('.tab-title li').removeClass('on').eq(1).addClass('on');
$('.tab-body .tab-con').removeClass('on').eq(1).addClass('on');
$(document).swipeRight(function(){
$('.tab-title li').removeClass('on').eq(0).addClass('on');
$('.tab-body .tab-con').removeClass('on').eq(0).addClass('on');
使用了swipeLeft()和swipeRight()的两个方法，但是在实际操作中发现上下滑动的时候会偶尔触发左右滑动事件，请问要如何修改呢？
页面中使用了zepto的swipeLeft和swipeRight方法，上下滑动的时候也会误触发左右滑动事件
要实现的效果：右滑动切换到评价页面左滑动切换简介页面
$(document).swipeLeft(function(){
$('.tab-title li').removeClass('on').eq(1).addClass('on');
$('.tab-body .tab-con').removeClass('on').eq(1).addClass('on');
$(document).swipeRight(function(){
$('.tab-title li').removeClass('on').eq(0).addClass('on');
$('.tab-body .tab-con').removeClass('on').eq(0).addClass('on');
使用了swipeLeft()和swipeRight()的两个方法，但是在实际操作中发现上下滑动的时候会偶尔触发左右滑动事件，请问要如何修改呢？
页面中使用了zepto的swipeLeft和swipeRight方法，上下滑动的时候也会无触发左右滑动事件
要实现的效果：右滑动切换到评价页面左滑动切换简介页面
$(document).swipeLeft(function(){
$('.tab-title li').removeClass('on').eq(1).addClass('on');
$('.tab-body .tab-con').removeClass('on').eq(1).addClass('on');
$(document).swipeRight(function(){
$('.tab-title li').removeClass('on').eq(0).addClass('on');
$('.tab-body .tab-con').removeClass('on').eq(0).addClass('on');
使用了swipeLeft()和swipeRight()的两个方法，但是在实际操作中发现上下滑动的时候会偶尔触发左右滑动事件，请问要如何修改呢？
我要该，理由是：1、&touch库实现了什么和引入背景
click事件在移动端上会有&300ms&的延迟，同时因为需要&长按&，&双触击&等富交互，所以我们通常都会引入类似 zepto 这样的库。zepto 中touch库实现了&'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'&这样一些功能。
2、touch库实现'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'重要源代码（绑定在touchend事件上）
处理Touch事件能让你了解到用户的每一根手指的位置，在touch事件触发的时候产生，可以通过touch event handler的event对象取到，如果基于zepto.js开发，一般是通过event.touches[0]来获取属性。
clientX、clientY：触摸点相对于浏览器窗口viewport的位置
pageX、pageY： 触摸点相对于页面的位置
screenX,screenY：触摸点相对于屏幕的位置
identifier:touch：对象的unique ID
你可以绑定以下四种Touch事件来了解基本的touch事件：
touchstart:手指触摸屏幕上的时候触发
touchmove:手指在屏幕上移动的时候触发
touchend:手指从屏幕上拿起的时候触发
touchcancel:系统取消touch事件的时候触发
Touch模块添加以下事件，可以使用 on 和 off 来绑定。
tap&—元素tap的时候触发。
singleTap&and&doubleTap&— 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用&tap&代替)。
longTap&— 当一个元素被按住超过750ms触发。
swipe,&swipeLeft,&swipeRight,&swipeUp,&swipeDown&— 当元素被划过时触发。(可选择给定的方向)
这些事件也是所有Zepto对象集合上的快捷方法。
当你触摸屏幕并抬起手指，只触发touchstart和touched，当如果手指触摸屏幕并移动后抬起会触发touchstart，多次touchmove,touchend或touchcanel，可以根据基本的touch事件来封装成你想要实现复杂的效果，比如向左或向右滑动，向上或向下滑动，并在滑动时封装你想实现的效果。
touch.js封装好了滑动事件的处理，将其添加到自己的项目中，就可以直接调用向右、右、上、下滑动的事件。这样zepto.js官网手册中的例子就可以正常运行了。
&style&.delete { display: none; }&/style&
&ul id=items&
&li&List item 1 &span class=delete&DELETE&/span&&/li&
&li&List item 2 &span class=delete&DELETE&/span&&/li&
;(function($) { var touch = {},
touchTimeout, tapTimeout, swipeTimeout, longTapTimeout,
longTapDelay = 750,
function swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) &=
Math.abs(y1 - y2) ? (x1 - x2 & 0 ? 'Left' : 'Right') : (y1 - y2 & 0 ? 'Up' : 'Down')
function longTap() {
longTapTimeout = null
if (touch.last) {
touch.el.trigger('longTap')
touch = {}
function cancelLongTap() {
if (longTapTimeout) clearTimeout(longTapTimeout)
longTapTimeout = null
function cancelAll() {
if (touchTimeout) clearTimeout(touchTimeout)
if (tapTimeout) clearTimeout(tapTimeout)
if (swipeTimeout) clearTimeout(swipeTimeout)
if (longTapTimeout) clearTimeout(longTapTimeout)
touchTimeout = tapTimeout = swipeTimeout = longTapTimeout = null
touch = {}
function isPrimaryTouch(event) {
return (event.pointerType == 'touch' ||
event.pointerType == event.MSPOINTER_TYPE_TOUCH) && event.isPrimary
function isPointerEventType(e, type) {
return (e.type == 'pointer' + type ||
e.type.toLowerCase() == 'mspointer' + type)
} $(document).ready(function() {
var now, delta, deltaX = 0,
deltaY = 0,
firstTouch, _isPointerType
if ('MSGesture' in window) {
gesture = new MSGesture()
gesture.target = document.body
$(document)
.bind('MSGestureEnd', function(e) {
var swipeDirectionFromVelocity =
e.velocityX & 1 ? 'Right' : e.velocityX & -1 ? 'Left' : e.velocityY & 1 ? 'Down' : e.velocityY & -1 ? 'Up' :
if (swipeDirectionFromVelocity) {
touch.el.trigger('swipe')
touch.el.trigger('swipe' + swipeDirectionFromVelocity)
.on('touchstart MSPointerDown pointerdown', function(e) {
if ((_isPointerType = isPointerEventType(e, 'down')) && !isPrimaryTouch(e)) return
firstTouch = _isPointerType ? e : e.touches[0]
if (e.touches && e.touches.length === 1 && touch.x2) {
// Clear out touch movement data if we have it sticking around
// This can occur if touchcancel doesn't fire due to preventDefault, etc.
touch.x2 = undefined
touch.y2 = undefined
now = Date.now()
delta = now - (touch.last || now)
touch.el = $('tagName' in firstTouch.target ? firstTouch.target : firstTouch.target.parentNode)
touchTimeout && clearTimeout(touchTimeout)
touch.x1 = firstTouch.pageX
touch.y1 = firstTouch.pageY
if (delta & 0 && delta &= 250) touch.isDoubleTap = true
touch.last = now
longTapTimeout = setTimeout(longTap, longTapDelay)
// adds the current touch contact for IE gesture recognition
if (gesture && _isPointerType) gesture.addPointer(e.pointerId);
.on('touchmove MSPointerMove pointermove', function(e) {
if ((_isPointerType = isPointerEventType(e, 'move')) && !isPrimaryTouch(e)) return
firstTouch = _isPointerType ? e : e.touches[0]
cancelLongTap()
touch.x2 = firstTouch.pageX
touch.y2 = firstTouch.pageY
deltaX += Math.abs(touch.x1 - touch.x2)
deltaY += Math.abs(touch.y1 - touch.y2)
.on('touchend MSPointerUp pointerup', function(e) {
if ((_isPointerType = isPointerEventType(e, 'up')) && !isPrimaryTouch(e)) return
cancelLongTap()
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) & 30) ||
(touch.y2 && Math.abs(touch.y1 - touch.y2) & 30))
swipeTimeout = setTimeout(function() {
touch.el.trigger('swipe')
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
touch = {}
// normal tap
else if ('last' in touch)
// don't fire tap when delta position changed by more than 30 pixels,
// for instance when moving to a point and back to origin
if (deltaX & 30 && deltaY & 30) {
// delay by one tick so we can cancel the 'tap' event if 'scroll' fires
// ('tap' fires before 'scroll')
tapTimeout = setTimeout(function() {
// trigger universal 'tap' with the option to cancelTouch()
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
var event = $.Event('tap')
event.cancelTouch = cancelAll
touch.el.trigger(event)
// trigger double tap immediately
if (touch.isDoubleTap) {
if (touch.el) touch.el.trigger('doubleTap')
touch = {}
// trigger single tap after 250ms of inactivity
touchTimeout = setTimeout(function() {
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
touch = {}
deltaX = deltaY = 0
// when the browser window loses focus,
// for example when a modal dialog is shown,
// cancel all ongoing events
.on('touchcancel MSPointerCancel pointercancel', cancelAll)
// scrolling the window indicates intention of the user
// to scroll, not tap or swipe, so cancel all ongoing events
$(window).on('scroll', cancelAll) }) ; ['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
'doubleTap', 'tap', 'singleTap', 'longTap' ].forEach(function(eventName) {
$.fn[eventName] = function(callback) {
return this.on(eventName, callback)
} })})(Zepto)
效果就实现了
阅读(...) 评论()zepto的swipe在手机上滑动没有反应？求大神解答 - 知乎2被浏览1742分享邀请回答1添加评论分享收藏感谢收起