jQuery触屏插件：Tap 代码

最新推荐文章于 2022-11-24 09:33:35 发布

转载最新推荐文章于 2022-11-24 09:33:35 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xrkbgan/p/3768451.html

文章标签：

#javascript #ViewUI

本文详细介绍了jQuery触屏插件Tap的使用方法及核心实现原理，包括事件监听、坐标计算和手势判断等关键步骤。

jQuery触屏插件：Tap，使用方法非常简单，例：
$("#domid").tap(function(){
alert("You tapped me! -- by"+this.innerText);
});
依赖jquery 1.7+

01
$.fn.tap = function(fn){
02
var collection = this,
03
isTouch = "ontouchend" in document.createElement("div"),
04
tstart = isTouch ? "touchstart" : "mousedown",
05
tmove = isTouch ? "touchmove" : "mousemove",
06
tend = isTouch ? "touchend" : "mouseup",
07
tcancel = isTouch ? "touchcancel" : "mouseout";
08
collection.each(function(){
09
var i = {};
10
i.target = this;
11
$(i.target).on(tstart,function(e){
12
var p = "touches" in e ? e.touches[0] : (isTouch ? window.event.touches[0] : window.event);
13
i.startX = p.clientX;
14
i.startY = p.clientY;
15
i.endX = p.clientX;
16
i.endY = p.clientY;
17
i.startTime = + new Date;
18
});
19
$(i.target).on(tmove,function(e){
20
var p = "touches" in e ? e.touches[0] : (isTouch ? window.event.touches[0] : window.event);
21
i.endX = p.clientX;
22
i.endY = p.clientY;
23
});
24
$(i.target).on(tend,function(e){
25
if((+ new Date)-i.startTime<300){
26
if(Math.abs(i.endX-i.startX)+Math.abs(i.endY-i.startY)<20){
27
var e = e || window.event;
28
e.preventDefault();
29
fn.call(i.target);
30
http://www.huiyi8.com/biaoqian/taobao/}
31
}
32
i.startTime = undefined;
33
i.startX = undefined;
34
i.startY = undefined;
35
i.endX = undefined;
36
i.endY = undefined;
37
});
38
});
39
return collection;
40
}