第一种：
<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>
第二种：
<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);
<br><br>