Click.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505
  1. /* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
  2. * full list of contributors). Published under the 2-clause BSD license.
  3. * See license.txt in the OpenLayers distribution or repository for the
  4. * full text of the license. */
  5. /**
  6. * @requires OpenLayers/Handler.js
  7. */
  8. /**
  9. * Class: OpenLayers.Handler.Click
  10. * A handler for mouse clicks. The intention of this handler is to give
  11. * controls more flexibility with handling clicks. Browsers trigger
  12. * click events twice for a double-click. In addition, the mousedown,
  13. * mousemove, mouseup sequence fires a click event. With this handler,
  14. * controls can decide whether to ignore clicks associated with a double
  15. * click. By setting a <pixelTolerance>, controls can also ignore clicks
  16. * that include a drag. Create a new instance with the
  17. * <OpenLayers.Handler.Click> constructor.
  18. *
  19. * Inherits from:
  20. * - <OpenLayers.Handler>
  21. */
  22. OpenLayers.Handler.Click = OpenLayers.Class(OpenLayers.Handler, {
  23. /**
  24. * APIProperty: delay
  25. * {Number} Number of milliseconds between clicks before the event is
  26. * considered a double-click.
  27. */
  28. delay: 300,
  29. /**
  30. * APIProperty: single
  31. * {Boolean} Handle single clicks. Default is true. If false, clicks
  32. * will not be reported. If true, single-clicks will be reported.
  33. */
  34. single: true,
  35. /**
  36. * APIProperty: double
  37. * {Boolean} Handle double-clicks. Default is false.
  38. */
  39. 'double': false,
  40. /**
  41. * APIProperty: pixelTolerance
  42. * {Number} Maximum number of pixels between mouseup and mousedown for an
  43. * event to be considered a click. Default is 0. If set to an
  44. * integer value, clicks with a drag greater than the value will be
  45. * ignored. This property can only be set when the handler is
  46. * constructed.
  47. */
  48. pixelTolerance: 0,
  49. /**
  50. * APIProperty: dblclickTolerance
  51. * {Number} Maximum distance in pixels between clicks for a sequence of
  52. * events to be considered a double click. Default is 13. If the
  53. * distance between two clicks is greater than this value, a double-
  54. * click will not be fired.
  55. */
  56. dblclickTolerance: 13,
  57. /**
  58. * APIProperty: stopSingle
  59. * {Boolean} Stop other listeners from being notified of clicks. Default
  60. * is false. If true, any listeners registered before this one for
  61. * click or rightclick events will not be notified.
  62. */
  63. stopSingle: false,
  64. /**
  65. * APIProperty: stopDouble
  66. * {Boolean} Stop other listeners from being notified of double-clicks.
  67. * Default is false. If true, any click listeners registered before
  68. * this one will not be notified of *any* double-click events.
  69. *
  70. * The one caveat with stopDouble is that given a map with two click
  71. * handlers, one with stopDouble true and the other with stopSingle
  72. * true, the stopSingle handler should be activated last to get
  73. * uniform cross-browser performance. Since IE triggers one click
  74. * with a dblclick and FF triggers two, if a stopSingle handler is
  75. * activated first, all it gets in IE is a single click when the
  76. * second handler stops propagation on the dblclick.
  77. */
  78. stopDouble: false,
  79. /**
  80. * Property: timerId
  81. * {Number} The id of the timeout waiting to clear the <delayedCall>.
  82. */
  83. timerId: null,
  84. /**
  85. * Property: down
  86. * {Object} Object that store relevant information about the last
  87. * mousedown or touchstart. Its 'xy' OpenLayers.Pixel property gives
  88. * the average location of the mouse/touch event. Its 'touches'
  89. * property records clientX/clientY of each touches.
  90. */
  91. down: null,
  92. /**
  93. * Property: last
  94. * {Object} Object that store relevant information about the last
  95. * mousemove or touchmove. Its 'xy' OpenLayers.Pixel property gives
  96. * the average location of the mouse/touch event. Its 'touches'
  97. * property records clientX/clientY of each touches.
  98. */
  99. last: null,
  100. /**
  101. * Property: first
  102. * {Object} When waiting for double clicks, this object will store
  103. * information about the first click in a two click sequence.
  104. */
  105. first: null,
  106. /**
  107. * Property: rightclickTimerId
  108. * {Number} The id of the right mouse timeout waiting to clear the
  109. * <delayedEvent>.
  110. */
  111. rightclickTimerId: null,
  112. /**
  113. * Constructor: OpenLayers.Handler.Click
  114. * Create a new click handler.
  115. *
  116. * Parameters:
  117. * control - {<OpenLayers.Control>} The control that is making use of
  118. * this handler. If a handler is being used without a control, the
  119. * handler's setMap method must be overridden to deal properly with
  120. * the map.
  121. * callbacks - {Object} An object with keys corresponding to callbacks
  122. * that will be called by the handler. The callbacks should
  123. * expect to recieve a single argument, the click event.
  124. * Callbacks for 'click' and 'dblclick' are supported.
  125. * options - {Object} Optional object whose properties will be set on the
  126. * handler.
  127. */
  128. /**
  129. * Method: touchstart
  130. * Handle touchstart.
  131. *
  132. * Returns:
  133. * {Boolean} Continue propagating this event.
  134. */
  135. touchstart: function(evt) {
  136. this.startTouch();
  137. this.down = this.getEventInfo(evt);
  138. this.last = this.getEventInfo(evt);
  139. return true;
  140. },
  141. /**
  142. * Method: touchmove
  143. * Store position of last move, because touchend event can have
  144. * an empty "touches" property.
  145. *
  146. * Returns:
  147. * {Boolean} Continue propagating this event.
  148. */
  149. touchmove: function(evt) {
  150. this.last = this.getEventInfo(evt);
  151. return true;
  152. },
  153. /**
  154. * Method: touchend
  155. * Correctly set event xy property, and add lastTouches to have
  156. * touches property from last touchstart or touchmove
  157. *
  158. * Returns:
  159. * {Boolean} Continue propagating this event.
  160. */
  161. touchend: function(evt) {
  162. // touchstart may not have been allowed to propagate
  163. if (this.down) {
  164. evt.xy = this.last.xy;
  165. evt.lastTouches = this.last.touches;
  166. this.handleSingle(evt);
  167. this.down = null;
  168. }
  169. return true;
  170. },
  171. /**
  172. * Method: mousedown
  173. * Handle mousedown.
  174. *
  175. * Returns:
  176. * {Boolean} Continue propagating this event.
  177. */
  178. mousedown: function(evt) {
  179. this.down = this.getEventInfo(evt);
  180. this.last = this.getEventInfo(evt);
  181. return true;
  182. },
  183. /**
  184. * Method: mouseup
  185. * Handle mouseup. Installed to support collection of right mouse events.
  186. *
  187. * Returns:
  188. * {Boolean} Continue propagating this event.
  189. */
  190. mouseup: function (evt) {
  191. var propagate = true;
  192. // Collect right mouse clicks from the mouseup
  193. // IE - ignores the second right click in mousedown so using
  194. // mouseup instead
  195. if (this.checkModifiers(evt) && this.control.handleRightClicks &&
  196. OpenLayers.Event.isRightClick(evt)) {
  197. propagate = this.rightclick(evt);
  198. }
  199. return propagate;
  200. },
  201. /**
  202. * Method: rightclick
  203. * Handle rightclick. For a dblrightclick, we get two clicks so we need
  204. * to always register for dblrightclick to properly handle single
  205. * clicks.
  206. *
  207. * Returns:
  208. * {Boolean} Continue propagating this event.
  209. */
  210. rightclick: function(evt) {
  211. if(this.passesTolerance(evt)) {
  212. if(this.rightclickTimerId != null) {
  213. //Second click received before timeout this must be
  214. // a double click
  215. this.clearTimer();
  216. this.callback('dblrightclick', [evt]);
  217. return !this.stopDouble;
  218. } else {
  219. //Set the rightclickTimerId, send evt only if double is
  220. // true else trigger single
  221. var clickEvent = this['double'] ?
  222. OpenLayers.Util.extend({}, evt) :
  223. this.callback('rightclick', [evt]);
  224. var delayedRightCall = OpenLayers.Function.bind(
  225. this.delayedRightCall,
  226. this,
  227. clickEvent
  228. );
  229. this.rightclickTimerId = window.setTimeout(
  230. delayedRightCall, this.delay
  231. );
  232. }
  233. }
  234. return !this.stopSingle;
  235. },
  236. /**
  237. * Method: delayedRightCall
  238. * Sets <rightclickTimerId> to null. And optionally triggers the
  239. * rightclick callback if evt is set.
  240. */
  241. delayedRightCall: function(evt) {
  242. this.rightclickTimerId = null;
  243. if (evt) {
  244. this.callback('rightclick', [evt]);
  245. }
  246. },
  247. /**
  248. * Method: click
  249. * Handle click events from the browser. This is registered as a listener
  250. * for click events and should not be called from other events in this
  251. * handler.
  252. *
  253. * Returns:
  254. * {Boolean} Continue propagating this event.
  255. */
  256. click: function(evt) {
  257. if (!this.last) {
  258. this.last = this.getEventInfo(evt);
  259. }
  260. this.handleSingle(evt);
  261. return !this.stopSingle;
  262. },
  263. /**
  264. * Method: dblclick
  265. * Handle dblclick. For a dblclick, we get two clicks in some browsers
  266. * (FF) and one in others (IE). So we need to always register for
  267. * dblclick to properly handle single clicks. This method is registered
  268. * as a listener for the dblclick browser event. It should *not* be
  269. * called by other methods in this handler.
  270. *
  271. * Returns:
  272. * {Boolean} Continue propagating this event.
  273. */
  274. dblclick: function(evt) {
  275. this.handleDouble(evt);
  276. return !this.stopDouble;
  277. },
  278. /**
  279. * Method: handleDouble
  280. * Handle double-click sequence.
  281. */
  282. handleDouble: function(evt) {
  283. if (this.passesDblclickTolerance(evt)) {
  284. if (this["double"]) {
  285. this.callback("dblclick", [evt]);
  286. }
  287. // to prevent a dblclick from firing the click callback in IE
  288. this.clearTimer();
  289. }
  290. },
  291. /**
  292. * Method: handleSingle
  293. * Handle single click sequence.
  294. */
  295. handleSingle: function(evt) {
  296. if (this.passesTolerance(evt)) {
  297. if (this.timerId != null) {
  298. // already received a click
  299. if (this.last.touches && this.last.touches.length === 1) {
  300. // touch device, no dblclick event - this may be a double
  301. if (this["double"]) {
  302. // on Android don't let the browser zoom on the page
  303. OpenLayers.Event.preventDefault(evt);
  304. }
  305. this.handleDouble(evt);
  306. }
  307. // if we're not in a touch environment we clear the click timer
  308. // if we've got a second touch, we'll get two touchend events
  309. if (!this.last.touches || this.last.touches.length !== 2) {
  310. this.clearTimer();
  311. }
  312. } else {
  313. // remember the first click info so we can compare to the second
  314. this.first = this.getEventInfo(evt);
  315. // set the timer, send evt only if single is true
  316. //use a clone of the event object because it will no longer
  317. //be a valid event object in IE in the timer callback
  318. var clickEvent = this.single ?
  319. OpenLayers.Util.extend({}, evt) : null;
  320. this.queuePotentialClick(clickEvent);
  321. }
  322. }
  323. },
  324. /**
  325. * Method: queuePotentialClick
  326. * This method is separated out largely to make testing easier (so we
  327. * don't have to override window.setTimeout)
  328. */
  329. queuePotentialClick: function(evt) {
  330. this.timerId = window.setTimeout(
  331. OpenLayers.Function.bind(this.delayedCall, this, evt),
  332. this.delay
  333. );
  334. },
  335. /**
  336. * Method: passesTolerance
  337. * Determine whether the event is within the optional pixel tolerance. Note
  338. * that the pixel tolerance check only works if mousedown events get to
  339. * the listeners registered here. If they are stopped by other elements,
  340. * the <pixelTolerance> will have no effect here (this method will always
  341. * return true).
  342. *
  343. * Returns:
  344. * {Boolean} The click is within the pixel tolerance (if specified).
  345. */
  346. passesTolerance: function(evt) {
  347. var passes = true;
  348. if (this.pixelTolerance != null && this.down && this.down.xy) {
  349. passes = this.pixelTolerance >= this.down.xy.distanceTo(evt.xy);
  350. // for touch environments, we also enforce that all touches
  351. // start and end within the given tolerance to be considered a click
  352. if (passes && this.touch &&
  353. this.down.touches.length === this.last.touches.length) {
  354. // the touchend event doesn't come with touches, so we check
  355. // down and last
  356. for (var i=0, ii=this.down.touches.length; i<ii; ++i) {
  357. if (this.getTouchDistance(
  358. this.down.touches[i],
  359. this.last.touches[i]
  360. ) > this.pixelTolerance) {
  361. passes = false;
  362. break;
  363. }
  364. }
  365. }
  366. }
  367. return passes;
  368. },
  369. /**
  370. * Method: getTouchDistance
  371. *
  372. * Returns:
  373. * {Boolean} The pixel displacement between two touches.
  374. */
  375. getTouchDistance: function(from, to) {
  376. return Math.sqrt(
  377. Math.pow(from.clientX - to.clientX, 2) +
  378. Math.pow(from.clientY - to.clientY, 2)
  379. );
  380. },
  381. /**
  382. * Method: passesDblclickTolerance
  383. * Determine whether the event is within the optional double-cick pixel
  384. * tolerance.
  385. *
  386. * Returns:
  387. * {Boolean} The click is within the double-click pixel tolerance.
  388. */
  389. passesDblclickTolerance: function(evt) {
  390. var passes = true;
  391. if (this.down && this.first) {
  392. passes = this.down.xy.distanceTo(this.first.xy) <= this.dblclickTolerance;
  393. }
  394. return passes;
  395. },
  396. /**
  397. * Method: clearTimer
  398. * Clear the timer and set <timerId> to null.
  399. */
  400. clearTimer: function() {
  401. if (this.timerId != null) {
  402. window.clearTimeout(this.timerId);
  403. this.timerId = null;
  404. }
  405. if (this.rightclickTimerId != null) {
  406. window.clearTimeout(this.rightclickTimerId);
  407. this.rightclickTimerId = null;
  408. }
  409. },
  410. /**
  411. * Method: delayedCall
  412. * Sets <timerId> to null. And optionally triggers the click callback if
  413. * evt is set.
  414. */
  415. delayedCall: function(evt) {
  416. this.timerId = null;
  417. if (evt) {
  418. this.callback("click", [evt]);
  419. }
  420. },
  421. /**
  422. * Method: getEventInfo
  423. * This method allows us to store event information without storing the
  424. * actual event. In touch devices (at least), the same event is
  425. * modified between touchstart, touchmove, and touchend.
  426. *
  427. * Returns:
  428. * {Object} An object with event related info.
  429. */
  430. getEventInfo: function(evt) {
  431. var touches;
  432. if (evt.touches) {
  433. var len = evt.touches.length;
  434. touches = new Array(len);
  435. var touch;
  436. for (var i=0; i<len; i++) {
  437. touch = evt.touches[i];
  438. touches[i] = {
  439. clientX: touch.olClientX,
  440. clientY: touch.olClientY
  441. };
  442. }
  443. }
  444. return {
  445. xy: evt.xy,
  446. touches: touches
  447. };
  448. },
  449. /**
  450. * APIMethod: deactivate
  451. * Deactivate the handler.
  452. *
  453. * Returns:
  454. * {Boolean} The handler was successfully deactivated.
  455. */
  456. deactivate: function() {
  457. var deactivated = false;
  458. if(OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) {
  459. this.clearTimer();
  460. this.down = null;
  461. this.first = null;
  462. this.last = null;
  463. deactivated = true;
  464. }
  465. return deactivated;
  466. },
  467. CLASS_NAME: "OpenLayers.Handler.Click"
  468. });