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

}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章