天天看點

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

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