HTML5触摸事件演化tap事件介绍_html5教程技巧

触摸对象属性

IE10+的触摸事件

MSPointerEvent属性

等价事件

很显然，触摸动作序列：touchstart-touchmove-touchend和鼠标序 列：mousedown-mousemove-mouseup以及键盘序列：keydown-keypress-keyup很相似，这并不是巧合，因为这 三种交互模式都可以描述为start-move-stop。

话说回来，click要经过touchstart-touchmove-touchend流程，300ms延迟，所以需要tap事件，tap就是在同一个点轻触时间很短。

封装好的tap和longtap事件

XML/HTML Code复制内容到剪贴板

1. (function() {
2. var TOUCHSTART, TOUCHEND;
3. if (typeof(window.ontouchstart) != 'undefined') {
4. TOUCHSTART = 'touchstart';
5. TOUCHEND = 'touchend';
6. TOUCHMOVE='touchmove';
8. } else if (typeof(window.onmspointerdown) != 'undefined') {
9. TOUCHSTART = 'MSPointerDown';
10. TOUCHEND = 'MSPointerUp';
11. TOUCHMOVE='MSPointerMove';
12. } else {
13. TOUCHSTART = 'mousedown';
14. TOUCHEND = 'mouseup';
15. TOUCHMOVE = 'mousemove';
16. }
17. function NodeTouch(node) {
18. this._node = node;
19. }
20. function tap(node,callback,scope) {
21. node.addEventListener(TOUCHSTART, function(e) {
22. x = e.touches[0].pageX;
23. y = e.touches[0].pageY;
24. });
25. node.addEventListener(TOUCHEND, function(e) {
26. e.stopPropagation();
27. e.preventDefault();
28. var curx = e.changedTouches[0].pageX;
29. var cury = e.changedTouches[0].pageY;
30. if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
31. callback.apply(scope, arguments);
32. }
33. });
34. }
35. function longTap(node,callback,scope) {
36. var x,y,startTime=0,endTime=0,in_dis=false;
37. node.addEventListener(TOUCHSTART, function(e) {
38. x = e.touches[0].pageX;
39. y = e.touches[0].pageY;
40. startTime=(new Date()).getTime();
41. });
42. node.addEventListener(TOUCHEND, function(e) {
43. e.stopPropagation();
44. e.preventDefault();
45. var curx = e.changedTouches[0].pageX;
46. var cury = e.changedTouches[0].pageY;
47. if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) {
48. in_dis=true;
49. }else{
50. in_dis=false;
51. }
52. endTime=(new Date()).getTime();
53. if (endTime - startTime > 300 && in_dis) {
54. callback.apply(scope, arguments);
55. }
56. });
57. }
58. NodeTouch.prototype.on = function(evt, callback, scope) {
59. var scopeObj;
60. var x,y;
61. if (!scope) {
62. scopeObj = this._node;
63. } else {
64. scopescopeObj = scope;
65. }
66. if (evt === 'tap') {
67. tap(this._node,callback,scope);
68. } else if(evt === 'longtap'){
69. longTap(this._node,callback,scope);
70. } else {
71. this._node.addEventListener(evt, function() {
72. callback.apply(scope, arguments);
73. });
74. }
75. return this;
76. }
77. window.$ = function(selector) {
78. var node = document.querySelector(selector);
79. if (node) {
80. return new NodeTouch(node);
81. } else {
82. return null;
83. }
84. }
85. })();
86. var box=$("#box");
87. box.on("longtap",function(){
88. console.log("你已经长按了");
89. },box)