event.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. var Eventful = require("../mixin/Eventful");
  2. exports.Dispatcher = Eventful;
  3. var env = require("./env");
  4. var _dom = require("./dom");
  5. var isCanvasEl = _dom.isCanvasEl;
  6. var transformCoordWithViewport = _dom.transformCoordWithViewport;
  7. /**
  8. * Utilities for mouse or touch events.
  9. */
  10. var isDomLevel2 = typeof window !== 'undefined' && !!window.addEventListener;
  11. var MOUSE_EVENT_REG = /^(?:mouse|pointer|contextmenu|drag|drop)|click/;
  12. var _calcOut = [];
  13. /**
  14. * Get the `zrX` and `zrY`, which are relative to the top-left of
  15. * the input `el`.
  16. * CSS transform (2D & 3D) is supported.
  17. *
  18. * The strategy to fetch the coords:
  19. * + If `calculate` is not set as `true`, users of this method should
  20. * ensure that `el` is the same or the same size & location as `e.target`.
  21. * Otherwise the result coords are probably not expected. Because we
  22. * firstly try to get coords from e.offsetX/e.offsetY.
  23. * + If `calculate` is set as `true`, the input `el` can be any element
  24. * and we force to calculate the coords based on `el`.
  25. * + The input `el` should be positionable (not position:static).
  26. *
  27. * The force `calculate` can be used in case like:
  28. * When mousemove event triggered on ec tooltip, `e.target` is not `el`(zr painter.dom).
  29. *
  30. * @param {HTMLElement} el DOM element.
  31. * @param {Event} e Mouse event or touch event.
  32. * @param {Object} out Get `out.zrX` and `out.zrY` as the result.
  33. * @param {boolean} [calculate=false] Whether to force calculate
  34. * the coordinates but not use ones provided by browser.
  35. */
  36. function clientToLocal(el, e, out, calculate) {
  37. out = out || {}; // According to the W3C Working Draft, offsetX and offsetY should be relative
  38. // to the padding edge of the target element. The only browser using this convention
  39. // is IE. Webkit uses the border edge, Opera uses the content edge, and FireFox does
  40. // not support the properties.
  41. // (see http://www.jacklmoore.com/notes/mouse-position/)
  42. // In zr painter.dom, padding edge equals to border edge.
  43. if (calculate || !env.canvasSupported) {
  44. calculateZrXY(el, e, out);
  45. } // Caution: In FireFox, layerX/layerY Mouse position relative to the closest positioned
  46. // ancestor element, so we should make sure el is positioned (e.g., not position:static).
  47. // BTW1, Webkit don't return the same results as FF in non-simple cases (like add
  48. // zoom-factor, overflow / opacity layers, transforms ...)
  49. // BTW2, (ev.offsetY || ev.pageY - $(ev.target).offset().top) is not correct in preserve-3d.
  50. // <https://bugs.jquery.com/ticket/8523#comment:14>
  51. // BTW3, In ff, offsetX/offsetY is always 0.
  52. else if (env.browser.firefox && e.layerX != null && e.layerX !== e.offsetX) {
  53. out.zrX = e.layerX;
  54. out.zrY = e.layerY;
  55. } // For IE6+, chrome, safari, opera. (When will ff support offsetX?)
  56. else if (e.offsetX != null) {
  57. out.zrX = e.offsetX;
  58. out.zrY = e.offsetY;
  59. } // For some other device, e.g., IOS safari.
  60. else {
  61. calculateZrXY(el, e, out);
  62. }
  63. return out;
  64. }
  65. function calculateZrXY(el, e, out) {
  66. // BlackBerry 5, iOS 3 (original iPhone) don't have getBoundingRect.
  67. if (env.domSupported && el.getBoundingClientRect) {
  68. var ex = e.clientX;
  69. var ey = e.clientY;
  70. if (isCanvasEl(el)) {
  71. // Original approach, which do not support CSS transform.
  72. // marker can not be locationed in a canvas container
  73. // (getBoundingClientRect is always 0). We do not support
  74. // that input a pre-created canvas to zr while using css
  75. // transform in iOS.
  76. var box = el.getBoundingClientRect();
  77. out.zrX = ex - box.left;
  78. out.zrY = ey - box.top;
  79. return;
  80. } else {
  81. if (transformCoordWithViewport(_calcOut, el, ex, ey)) {
  82. out.zrX = _calcOut[0];
  83. out.zrY = _calcOut[1];
  84. return;
  85. }
  86. }
  87. }
  88. out.zrX = out.zrY = 0;
  89. }
  90. /**
  91. * Find native event compat for legency IE.
  92. * Should be called at the begining of a native event listener.
  93. *
  94. * @param {Event} [e] Mouse event or touch event or pointer event.
  95. * For lagency IE, we use `window.event` is used.
  96. * @return {Event} The native event.
  97. */
  98. function getNativeEvent(e) {
  99. return e || window.event;
  100. }
  101. /**
  102. * Normalize the coordinates of the input event.
  103. *
  104. * Get the `e.zrX` and `e.zrY`, which are relative to the top-left of
  105. * the input `el`.
  106. * Get `e.zrDelta` if using mouse wheel.
  107. * Get `e.which`, see the comment inside this function.
  108. *
  109. * Do not calculate repeatly if `zrX` and `zrY` already exist.
  110. *
  111. * Notice: see comments in `clientToLocal`. check the relationship
  112. * between the result coords and the parameters `el` and `calculate`.
  113. *
  114. * @param {HTMLElement} el DOM element.
  115. * @param {Event} [e] See `getNativeEvent`.
  116. * @param {boolean} [calculate=false] Whether to force calculate
  117. * the coordinates but not use ones provided by browser.
  118. * @return {UIEvent} The normalized native UIEvent.
  119. */
  120. function normalizeEvent(el, e, calculate) {
  121. e = getNativeEvent(e);
  122. if (e.zrX != null) {
  123. return e;
  124. }
  125. var eventType = e.type;
  126. var isTouch = eventType && eventType.indexOf('touch') >= 0;
  127. if (!isTouch) {
  128. clientToLocal(el, e, e, calculate);
  129. e.zrDelta = e.wheelDelta ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
  130. } else {
  131. var touch = eventType !== 'touchend' ? e.targetTouches[0] : e.changedTouches[0];
  132. touch && clientToLocal(el, touch, e, calculate);
  133. } // Add which for click: 1 === left; 2 === middle; 3 === right; otherwise: 0;
  134. // See jQuery: https://github.com/jquery/jquery/blob/master/src/event.js
  135. // If e.which has been defined, it may be readonly,
  136. // see: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
  137. var button = e.button;
  138. if (e.which == null && button !== undefined && MOUSE_EVENT_REG.test(e.type)) {
  139. e.which = button & 1 ? 1 : button & 2 ? 3 : button & 4 ? 2 : 0;
  140. } // [Caution]: `e.which` from browser is not always reliable. For example,
  141. // when press left button and `mousemove (pointermove)` in Edge, the `e.which`
  142. // is 65536 and the `e.button` is -1. But the `mouseup (pointerup)` and
  143. // `mousedown (pointerdown)` is the same as Chrome does.
  144. return e;
  145. }
  146. /**
  147. * @param {HTMLElement} el
  148. * @param {string} name
  149. * @param {Function} handler
  150. * @param {Object|boolean} opt If boolean, means `opt.capture`
  151. * @param {boolean} [opt.capture=false]
  152. * @param {boolean} [opt.passive=false]
  153. */
  154. function addEventListener(el, name, handler, opt) {
  155. if (isDomLevel2) {
  156. // Reproduct the console warning:
  157. // [Violation] Added non-passive event listener to a scroll-blocking <some> event.
  158. // Consider marking event handler as 'passive' to make the page more responsive.
  159. // Just set console log level: verbose in chrome dev tool.
  160. // then the warning log will be printed when addEventListener called.
  161. // See https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
  162. // We have not yet found a neat way to using passive. Because in zrender the dom event
  163. // listener delegate all of the upper events of element. Some of those events need
  164. // to prevent default. For example, the feature `preventDefaultMouseMove` of echarts.
  165. // Before passive can be adopted, these issues should be considered:
  166. // (1) Whether and how a zrender user specifies an event listener passive. And by default,
  167. // passive or not.
  168. // (2) How to tread that some zrender event listener is passive, and some is not. If
  169. // we use other way but not preventDefault of mousewheel and touchmove, browser
  170. // compatibility should be handled.
  171. // var opts = (env.passiveSupported && name === 'mousewheel')
  172. // ? {passive: true}
  173. // // By default, the third param of el.addEventListener is `capture: false`.
  174. // : void 0;
  175. // el.addEventListener(name, handler /* , opts */);
  176. el.addEventListener(name, handler, opt);
  177. } else {
  178. // For simplicity, do not implement `setCapture` for IE9-.
  179. el.attachEvent('on' + name, handler);
  180. }
  181. }
  182. /**
  183. * Parameter are the same as `addEventListener`.
  184. *
  185. * Notice that if a listener is registered twice, one with capture and one without,
  186. * remove each one separately. Removal of a capturing listener does not affect a
  187. * non-capturing version of the same listener, and vice versa.
  188. */
  189. function removeEventListener(el, name, handler, opt) {
  190. if (isDomLevel2) {
  191. el.removeEventListener(name, handler, opt);
  192. } else {
  193. el.detachEvent('on' + name, handler);
  194. }
  195. }
  196. /**
  197. * preventDefault and stopPropagation.
  198. * Notice: do not use this method in zrender. It can only be
  199. * used by upper applications if necessary.
  200. *
  201. * @param {Event} e A mouse or touch event.
  202. */
  203. var stop = isDomLevel2 ? function (e) {
  204. e.preventDefault();
  205. e.stopPropagation();
  206. e.cancelBubble = true;
  207. } : function (e) {
  208. e.returnValue = false;
  209. e.cancelBubble = true;
  210. };
  211. /**
  212. * This method only works for mouseup and mousedown. The functionality is restricted
  213. * for fault tolerance, See the `e.which` compatibility above.
  214. *
  215. * @param {MouseEvent} e
  216. * @return {boolean}
  217. */
  218. function isMiddleOrRightButtonOnMouseUpDown(e) {
  219. return e.which === 2 || e.which === 3;
  220. }
  221. /**
  222. * To be removed.
  223. * @deprecated
  224. */
  225. function notLeftMouse(e) {
  226. // If e.which is undefined, considered as left mouse event.
  227. return e.which > 1;
  228. } // For backward compatibility
  229. exports.clientToLocal = clientToLocal;
  230. exports.getNativeEvent = getNativeEvent;
  231. exports.normalizeEvent = normalizeEvent;
  232. exports.addEventListener = addEventListener;
  233. exports.removeEventListener = removeEventListener;
  234. exports.stop = stop;
  235. exports.isMiddleOrRightButtonOnMouseUpDown = isMiddleOrRightButtonOnMouseUpDown;
  236. exports.notLeftMouse = notLeftMouse;