Question

移动端的网页，怎么很好的把滑动事件和点击事件区别开

Answer 1

以前写过一个库，研究过这一问题（当然产品环境下还是用现成的解决方案比较好）

也看过成熟解决方案的代码

很简单，记录位移，任意方向超过 10 就不是 tap 了。

某一方向 超过 30 就是 swipe，如果在 swipe 之前竖直方向位移大於 10 就判定为 scroll

如果进入 swipe 状态，就 preventDefault

如果时间超过一个数值（具体多少忘了，好象是 750？）就不是 swipe 了，或者也可以直接触发 swipe 事件。

只找到了更早的 touch 库（刚开始 iOS 开发的时候写的），部分代码：

var Touchable = function() {

function Touchable(target) {
var self = this;

function Touch(touch) {
this.x = touch.pageX;
this.y = touch.pageY;
}

EventEmitter.call(self);

self.el = El.from(target);
self.touches = {};

attach(self, self.el);

self.on({
touchstart: function(e) {
log("touchstart");
// log(e);

forEach(e.changedTouches, function(touch) {
capture(self, touch);

// log(touch);
});

},
touchmove: function(e) {
forEach(e.changedTouches, function(touch) {
var ot = self.touches[touch.identifier];

if (!ot)
return;

var t = new Touch(touch);

var dx = t.x - ot.x,
dy = t.y - ot.y;

if (ot.isSwipe === undefined && Math.abs(dy) > 10) {
ot.isSwipe = false;
ot.isScrolling = true;

self.emit("touchscrollstart", e);
} else if (ot.isSwipe === undefined && Math.abs(dy) < 10 && Math.abs(dx) > 30) {
e.preventDefault();

ot.isSwipe = true;
} else if (Math.abs(dy) > 30) {
ot.isSwipe = false;
}
});
},
touchend: function(e) {
log("touchend");
// log(e);

// log(self.touches);

forEach(e.changedTouches, function(touch) {
var ot = self.touches[touch.identifier];

if (!ot)
return;

var t = new Touch(touch);

log(ot);
log(t);

var dx = t.x - ot.x,
dy = t.y - ot.y;

if (Math.abs(dx) < 10 && Math.abs(dy) < 10)
self.emit("touchtap", e);
else if (ot.isSwipe)
self.emit("touchswipe", e);
else if (ot.isScrolling)
self.emit("touchscrollend", e);

uncapture(self, touch);
});

// log(self.touches);
},
touchcancel: function(e) {
log("touchcancel");
// log(e);

forEach(e.changedTouches, function(touch) {
uncapture(self, touch);

// log(touch);
});
}
});

function forEach(a, f) {
Array.prototype.forEach.call(a, f);
}

function capture(self, touch) {
var id = touch.identifier;

var t = new Touch(touch);

self.touches[id] = t;
}

function uncapture(self, touch) {
var id = touch.identifier;

delete self.touches[id];
}
}

Touchable.prototype = Object.create(EventEmitter.prototype, Obj.descriptor({
constructor: Touchable
}));

function attach(self, el) {
"touchstart touchmove touchend touchcancel".split(" ").forEach(function(x) {
self.el.on(x, function(e) {
self.emit(x, e);
});
});
}

function setPush(set, element) {
if (set.indexOf(element) === -1)
set.push(element);
}

return Touchable;
}();
旧代码很烂，见谅。