//第一个
Author: Alone
//依赖jQuery 或者Zepto
<script>
(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;
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.status;
if (x < 5 && y < 5) {
if (t < 300) {
s = "tap"
} else {
s = "longTap"
}
} else if (x < options.x && y > options.y) {
if (t < 250) {
if (this.te.y > 0) {
s = "swipeDown"
} else {
s = "swipeUp"
}
} else {
s = "swipe"
}
} else if (y < options.y && x > options.x) {
if (t < 250) {
if (this.te.x > 0) {
s = "swipeLeft"
} else {
s = "swipeRight"
}
} else {
s = "swipe"
}
}
if (s == this.e) {
this.target.trigger(this.e);
return
}
}
})(window.jQuery || window.Zepto);
</script>
--------------------------------------------------------------------------------------------
第二个 作者未知(依赖jquery)
<script>
;(function(a){
a.fn.touchwipe=function(c){
var b={
drag:false,
min_move_x:20,
min_move_y:20,
wipeLeft:function(){/*向左滑动*/},
wipeRight:function(){/*向右滑动*/},
wipeUp:function(){/*向上滑动*/},
wipeDown:function(){/*向下滑动*/},
wipe:function(){/*点击*/},
wipehold:function(){/*触摸保持*/},
wipeDrag:function(x,y){/*拖动*/},
preventDefaultEvents:true
};
if(c){a.extend(b,c)};
this.each(function(){
var h,g,j=false,i=false,e;
var supportTouch = "ontouchstart" in document.documentElement;
var moveEvent = supportTouch ? "touchmove" : "mousemove",
startEvent = supportTouch ? "touchstart" : "mousedown",
endEvent = supportTouch ? "touchend" : "mouseup"
/* 移除 touchmove 监听 */
function m(){
this.removeEventListener(moveEvent,d);
h=null;
j=false;
clearTimeout(e)
};
/* 事件处理方法 */
function d(q){
if(b.preventDefaultEvents){
q.preventDefault()
};
if(j){
var n = supportTouch ? q.touches[0].pageX : q.pageX;
var r = supportTouch ? q.touches[0].pageY : q.pageY;
var p = h-n;
var o = g-r;
if(b.drag){
h = n;
g = r;
clearTimeout(e);
b.wipeDrag(p,o);
}
else{
if(Math.abs(p)>=b.min_move_x){
m();
if(p>0){b.wipeLeft()}
else{b.wipeRight()}
}
else{
if(Math.abs(o)>=b.min_move_y){
m();
if(o>0){b.wipeUp()}
else{b.wipeDown()}
}
}
}
}
};
/*wipe 处理方法*/
function k(){clearTimeout(e);if(!i&&j){b.wipe()};i=false;j=false;};
/*wipehold 处理方法*/
function l(){i=true;b.wipehold()};
function f(n){
//if(n.touches.length==1){
h = supportTouch ? n.touches[0].pageX : n.pageX;
g = supportTouch ? n.touches[0].pageY : n.pageY;
j=true;
this.addEventListener(moveEvent,d,false);
e=setTimeout(l,750)
//}
};
//if("ontouchstart"in document.documentElement){
this.addEventListener(startEvent,f,false);
this.addEventListener(endEvent,k,false)
//}
});
return this
};
})(jQuery);
/*
调用
*/
$("#aa").touchwipe({
wipeLeft:function(){ alert("向左滑动了")},
wipeRight:function(){alert("向右滑动了")},
})
</script>
----------------------------------------------------------------------------------------------------------------
第三个
<script>
/**
* jQuery Plugin to obtain touch gestures
* @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
* @version 1.1.1 (9th December 2010)
*/
;(function($, undefined){
$.fn.touchwipe = function(settings) {
var config = {
min_move_x: 50,
min_move_y: 20,
wipeLeft: function() { },
wipeRight: function() { },
preventDefaultEvents: false
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var startY;
var isMoving = false;
var directionLocked = null;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
directionLocked = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var x = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;
var y = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;
var dx = startX - x;
var dy = startY - y;
var absDistX = Math.abs(dx);
var absDistY = Math.abs(dy);
if (directionLocked === "y") {
return
} else {
if (directionLocked === "x") {
e.preventDefault()
} else {
absDistX = Math.abs(dx);
absDistY = Math.abs(dy);
if (absDistX < 4) {
return
}
if (absDistY > absDistX ) {
dx = 0;
directionLocked = "y";
return
} else {
e.preventDefault();
directionLocked = "x"
}
}
}
if(absDistX >= config.min_move_x) {
cancelTouch();
if(dx > 0) {
config.wipeLeft();
}
else {
config.wipeRight();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.changedTouches ? e.changedTouches[0].clientX: e.clientX;
startY = e.changedTouches ? e.changedTouches[0].clientY: e.clientY;
isMoving = true;
directionLocked = false;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
return this;
};
})(jQuery);
其他地方
// JavaScript Document //$("#domid").tap(function(){ alert("You tapped me! -- by"+this.innerText); }); 依赖jquery 1.7+ $.fn.tap = function(e) { var g = this , a = "ontouchend" in document.createElement("div") , f = a ? "touchstart" : "mousedown" , c = a ? "touchmove" : "mousemove" , d = a ? "touchend" : "mouseup" , b = a ? "touchcancel" : "mouseout"; g.each(function() { var h = {}; h.target = this; $(h.target).on(f, function(j) { var i = "touches" in j ? j.touches[0] : (a ? window.event.touches[0] : window.event); h.startX = i.clientX; h.startY = i.clientY; h.endX = i.clientX; h.endY = i.clientY; h.startTime = +new Date } ); $(h.target).on(c, function(j) { var i = "touches" in j ? j.touches[0] : (a ? window.event.touches[0] : window.event); h.endX = i.clientX; h.endY = i.clientY } ); $(h.target).on(d, function(i) { if ((+new Date) - h.startTime < 300) { if (Math.abs(h.endX - h.startX) + Math.abs(h.endY - h.startY) < 20) { var i = i || window.event; i.preventDefault(); e.call(h.target) } } h.startTime = undefined; h.startX = undefined; h.startY = undefined; h.endX = undefined; h.endY = undefined } ) } ); return g } ;