zy_click.js 4.6 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 zyClick = function(selector,clickFun,css,longClickFun){
  16. var self = this;
  17. self._clickFun = clickFun || null;
  18. self._longClickFun = longClickFun || null;
  19. self._click=false;
  20. self.css = css;
  21. if(typeof selector == 'object')
  22. self.element = selector;
  23. else if(typeof selector == 'string')
  24. self.element = document.getElementById(selector);
  25. self.attribute=self.element.getAttribute("onclick");
  26. self.element.removeAttribute("onclick");
  27. self.element.addEventListener($E.start, self, false);
  28. self.element.addEventListener($E.move, self, false);
  29. self.element.addEventListener($E.end, self, false);
  30. if($E.cancel!="")
  31. {
  32. self.element.addEventListener($E.cancel, self, false);
  33. document.addEventListener($E.cancel, self, false);
  34. }
  35. document.addEventListener($E.end, self, false);
  36. return self;
  37. }
  38. zyClick.prototype = {
  39. handleEvent: function(event) {
  40. var self = this;
  41. switch (event.type) {
  42. case $E.start:
  43. self._touchStart(event);
  44. break;
  45. case $E.move:
  46. self._touchMove(event);
  47. break;
  48. case $E.end:
  49. case $E.cancel:
  50. self._touchEnd(event);
  51. break;
  52. }
  53. },
  54. _touchStart: function(event) {
  55. var self = this;
  56. self.start = true;
  57. self._click=true;
  58. self.startPageX = getPage(event, 'pageX');
  59. self.startPageY = getPage(event, 'pageY');
  60. self.startTime = event.timeStamp;
  61. if (self.css && !self.touchTime) {
  62. self.touchTime=setTimeout(function(){
  63. if (self._click && self.element.className.indexOf(self.css)<0)
  64. self.element.className += (" " + self.css);
  65. }, 50);
  66. }
  67. if (self.css && !self.longtouchTime) {
  68. self.longtouchTime=setTimeout(function(){
  69. self.start = false;
  70. self._click = false;
  71. clearTimeout(self.touchTime);
  72. clearTimeout(self.longtouchTime);
  73. self.touchTime=null;
  74. self.longtouchTime=null;
  75. if(self.css)
  76. self.element.className=self.element.className.replace(" "+self.css,"");
  77. if (self._longClickFun)
  78. self._longClickFun(self);
  79. }, 500);
  80. }
  81. },
  82. _touchMove: function(event) {
  83. var self = this;
  84. if(!self.start)
  85. return;
  86. var pageX = getPage(event, 'pageX'),
  87. pageY = getPage(event, 'pageY'),
  88. deltaX = pageX - self.startPageX,
  89. deltaY = pageY - self.startPageY;
  90. if((Math.abs(deltaX)>5 || Math.abs(deltaY)>5))
  91. {
  92. if (self._click) {
  93. clearTimeout(self.touchTime);
  94. clearTimeout(self.longtouchTime);
  95. self.touchTime = null;
  96. self.longtouchTime=null;
  97. self._click = false;
  98. if (self.css)
  99. self.element.className = self.element.className.replace(" " + self.css, "");
  100. }
  101. }
  102. else{
  103. }
  104. },
  105. _touchEnd: function(event) {
  106. var self = this;
  107. if(self.start == true)
  108. {
  109. if (self.touchTime) {
  110. clearTimeout(self.touchTime);
  111. self.touchTime=null;
  112. }
  113. if (self.longtouchTime) {
  114. clearTimeout(self.longtouchTime);
  115. self.longtouchTime=null;
  116. }
  117. self.start = false;
  118. if(self.css)
  119. self.element.className=self.element.className.replace(" "+self.css,"");
  120. if(self._click)
  121. {
  122. self._click=false;
  123. if(event.timeStamp - self.startTime>1000)
  124. return;
  125. if(event.type==$E.cancel)
  126. return;
  127. if(self._clickFun)
  128. self._clickFun(self.element);
  129. if(self.attribute)
  130. eval(self.attribute);
  131. }
  132. }
  133. },
  134. destroy: function() {
  135. var self = this;
  136. self.element.removeEventListener($E.start, self);
  137. self.element.removeEventListener($E.move, self);
  138. self.element.removeEventListener($E.end, self);
  139. self.element.removeEventListener($E.cancel, self);
  140. document.removeEventListener($E.end, self);
  141. document.removeEventListener($E.cancel, self);
  142. }
  143. }