HTML5触摸事件演化tap事件

touchstart

touchmove

事件的目标 element 和这个 touchmove 事件对应的 touchstart 事件的目标 element 相同，

哪怕当 touchmove 事件触发时，触点已经移出了该 element 。

touchend

当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。

已经被从触摸平面上移除的触点，可以在 changedTouches 属性定义的 TouchList 中找到。

touchenter

touchleave

touchcancel

• 由于某个事件取消了触摸：例如触摸过程被一个模态的弹出框打断。
• 触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。
• 当用户产生的触点个数超过了设备支持的个数，从而导致 TouchList 中最早的 Touch 对象被取消。

或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 window 或 document 对象.

因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

(function() {

    var TOUCHSTART, TOUCHEND;

    if (typeof(window.ontouchstart) != ‘undefined‘) {

        TOUCHSTART = ‘touchstart‘;

        TOUCHEND = ‘touchend‘;

        TOUCHMOVE=‘touchmove‘;

    } else if (typeof(window.onmspointerdown) != ‘undefined‘) {

        TOUCHSTART = ‘MSPointerDown‘;

        TOUCHEND = ‘MSPointerUp‘;

        TOUCHMOVE=‘MSPointerMove‘;

    } else {

        TOUCHSTART = ‘mousedown‘;

        TOUCHEND = ‘mouseup‘;

        TOUCHMOVE = ‘mousemove‘;

    }

    function NodeTouch(node) {

        this._node = node;

    }

    function tap(node,callback,scope) {

        node.addEventListener(TOUCHSTART, function(e) {

            x = e.touches[0].pageX;

            y = e.touches[0].pageY;

        });

        node.addEventListener(TOUCHEND, function(e) {

            e.stopPropagation();

            e.preventDefault();

            var curx = e.changedTouches[0].pageX;

            var cury = e.changedTouches[0].pageY;

            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {

                callback.apply(scope, arguments);

            }

        });

    }

    function longTap(node,callback,scope) {

        var x,y,startTime=0,endTime=0,in_dis=false;

        node.addEventListener(TOUCHSTART, function(e) {

            x = e.touches[0].pageX;

            y = e.touches[0].pageY;

            startTime=(new Date()).getTime();

        });

        node.addEventListener(TOUCHEND, function(e) {

            e.stopPropagation();

            e.preventDefault();

            var curx = e.changedTouches[0].pageX;

            var cury = e.changedTouches[0].pageY;

            if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {

                in_dis=true;

            }else{

                in_dis=false;

            }

            endTime=(new Date()).getTime();

            if (endTime - startTime > 300 && in_dis) {

                callback.apply(scope, arguments);

            }

        });

    }

    NodeTouch.prototype.on = function(evt, callback, scope) {

        var scopeObj;

        var x,y;

        if (!scope) {

            scopeObj = this._node;

        } else {

            scopeObj = scope;

        }

        if (evt === ‘tap‘) {

            tap(this._node,callback,scope);

        } else if(evt === ‘longtap‘){

            longTap(this._node,callback,scope);

        } else {

            this._node.addEventListener(evt, function() {

                callback.apply(scope, arguments);

            });

        }

        return this;

    }

    window.$ = function(selector) {

        var node = document.querySelector(selector);

        if (node) {

            return new NodeTouch(node);

        } else {

            return null;

        }

    }

})();

var box=$("#box");

box.on("longtap",function(){

    console.log("你已经长按了");

},box)