zy_event.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. var $support = {
  2. transform3d: ('WebKitCSSMatrix' in window),
  3. touch: ('ontouchstart' in window)
  4. };
  5. var $E = {
  6. start: $support.touch ? 'touchstart' : 'mousedown',
  7. move: $support.touch ? 'touchmove' : 'mousemove',
  8. end: $support.touch ? 'touchend' : 'mouseup',
  9. cancel: $support.touch ? 'touchcancel' : '',
  10. transEnd:'webkitTransitionEnd'
  11. };
  12. function getPage (event, page) {
  13. return $support.touch ? event.changedTouches[0][page] : event[page];
  14. }
  15. var zyEvent = function(selector,moveFun,endFun,lock,transEnd){
  16. var self = this;
  17. var max = 50;
  18. self.Max = {X:max,Y:max};
  19. self.endFun = endFun || null;
  20. self.moveFun = moveFun || null;
  21. self.transEnd = transEnd||null;
  22. self.type = "";
  23. self._vendor=(window.navigator.userAgent.indexOf("Android 4.")>=0);
  24. self._locked=lock;
  25. self.start = false;
  26. if(typeof selector == 'object')
  27. self.element = selector;
  28. else if(typeof selector == 'string')
  29. self.element = document.getElementById(selector);
  30. self.element.addEventListener($E.start, self, false);
  31. self.element.addEventListener($E.move, self, false);
  32. self.element.addEventListener($E.transEnd, self, false);
  33. if($E.cancel!="")
  34. {
  35. self.element.addEventListener($E.cancel, self, false);
  36. document.addEventListener($E.cancel, self, false);
  37. }
  38. document.addEventListener($E.end, self, false);
  39. return self;
  40. }
  41. zyEvent.prototype = {
  42. handleEvent: function(event) {
  43. var self = this;
  44. switch (event.type) {
  45. case $E.start:
  46. self._touchStart(event);
  47. break;
  48. case $E.move:
  49. self._touchMove(event);
  50. break;
  51. case $E.end:
  52. case $E.cancel:
  53. self._touchEnd(event);
  54. break;
  55. case 'click':
  56. self._click(event);
  57. break;
  58. case $E.transEnd:
  59. if(self.transEnd)
  60. self.transEnd(event);
  61. break;
  62. }
  63. },
  64. _touchStart: function(event) {
  65. var self = this;
  66. self.start = true;
  67. if (!$support.touch) {
  68. event.preventDefault();
  69. }
  70. if(self._locked)
  71. {
  72. event.stopPropagation();
  73. }
  74. self.type = "";
  75. self.startPageX = getPage(event, 'pageX');
  76. self.startPageY = getPage(event, 'pageY');
  77. self.startTime = event.timeStamp;
  78. },
  79. _touchMove: function(event) {
  80. var self = this;
  81. if(!self.start)
  82. return;
  83. var pageX = getPage(event, 'pageX'),
  84. pageY = getPage(event, 'pageY'),
  85. deltaX = pageX - self.startPageX,
  86. deltaY = pageY - self.startPageY;
  87. if(self._vendor)//Android 4.0 need prevent default
  88. {
  89. event.preventDefault();
  90. }
  91. if(self._locked)
  92. {
  93. event.preventDefault();
  94. event.stopPropagation();
  95. }
  96. if(Math.abs(deltaX)> Math.abs(deltaY) && deltaX<-self.Max.X)
  97. self.type = "left";
  98. if(Math.abs(deltaX)> Math.abs(deltaY) && deltaX>self.Max.X)
  99. self.type = "right";
  100. if(Math.abs(deltaX)< Math.abs(deltaY) && deltaY<-self.Max.Y)
  101. self.type = "up";
  102. if(Math.abs(deltaX)< Math.abs(deltaY) && deltaY>self.Max.Y)
  103. self.type = "down";
  104. if(self.moveFun)
  105. self.moveFun(self.element,deltaX,deltaY);
  106. },
  107. _touchEnd: function(event) {
  108. var self = this;
  109. if(self._locked)
  110. {
  111. event.preventDefault();
  112. event.stopPropagation();
  113. }
  114. if(self.start == true)
  115. {
  116. var pageX = getPage(event, 'pageX'),
  117. pageY = getPage(event, 'pageY'),
  118. deltaX = pageX - self.startPageX,
  119. deltaY = pageY - self.startPageY;
  120. if(self.endFun)
  121. self.endFun(self.element,deltaX,deltaY,self.type);
  122. self.start = false;
  123. }
  124. },
  125. _click: function(event) {
  126. var self = this;
  127. event.stopPropagation();
  128. event.preventDefault();
  129. },
  130. destroy: function() {
  131. var self = this;
  132. self.element.removeEventListener($E.start, self);
  133. self.element.removeEventListener($E.move, self);
  134. self.element.removeEventListener($E.transEnd, self);
  135. self.element.removeEventListener($E.cancel, self);
  136. document.removeEventListener($E.end, self);
  137. document.removeEventListener($E.cancel, self);
  138. }
  139. }