25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

116 lines
4.8 KiB

  1. /*!
  2. * hoverIntent v1.8.1 // 2014.08.11 // jQuery v1.9.1+
  3. * http://cherne.net/brian/resources/jquery.hoverIntent.html
  4. *
  5. * You may use hoverIntent under the terms of the MIT license. Basically that
  6. * means you are free to use hoverIntent as long as this header is left intact.
  7. * Copyright 2007, 2014 Brian Cherne
  8. */
  9. /* hoverIntent is similar to jQuery's built-in "hover" method except that
  10. * instead of firing the handlerIn function immediately, hoverIntent checks
  11. * to see if the user's mouse has slowed down (beneath the sensitivity
  12. * threshold) before firing the event. The handlerOut function is only
  13. * called after a matching handlerIn.
  14. *
  15. * // basic usage ... just like .hover()
  16. * .hoverIntent( handlerIn, handlerOut )
  17. * .hoverIntent( handlerInOut )
  18. *
  19. * // basic usage ... with event delegation!
  20. * .hoverIntent( handlerIn, handlerOut, selector )
  21. * .hoverIntent( handlerInOut, selector )
  22. *
  23. * // using a basic configuration object
  24. * .hoverIntent( config )
  25. *
  26. * @param handlerIn function OR configuration object
  27. * @param handlerOut function OR selector for delegation OR undefined
  28. * @param selector selector OR undefined
  29. * @author Brian Cherne <brian(at)cherne(dot)net>
  30. */
  31. (function($) {
  32. $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {
  33. // default configuration values
  34. var cfg = {
  35. interval: 100,
  36. sensitivity: 6,
  37. timeout: 0
  38. };
  39. if ( typeof handlerIn === "object" ) {
  40. cfg = $.extend(cfg, handlerIn );
  41. } else if ($.isFunction(handlerOut)) {
  42. cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
  43. } else {
  44. cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
  45. }
  46. // instantiate variables
  47. // cX, cY = current X and Y position of mouse, updated by mousemove event
  48. // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
  49. var cX, cY, pX, pY;
  50. // A private function for getting mouse position
  51. var track = function(ev) {
  52. cX = ev.pageX;
  53. cY = ev.pageY;
  54. };
  55. // A private function for comparing current and previous mouse position
  56. var compare = function(ev,ob) {
  57. ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  58. // compare mouse positions to see if they've crossed the threshold
  59. if ( Math.sqrt( (pX-cX)*(pX-cX) + (pY-cY)*(pY-cY) ) < cfg.sensitivity ) {
  60. $(ob).off("mousemove.hoverIntent",track);
  61. // set hoverIntent state to true (so mouseOut can be called)
  62. ob.hoverIntent_s = true;
  63. return cfg.over.apply(ob,[ev]);
  64. } else {
  65. // set previous coordinates for next time
  66. pX = cX; pY = cY;
  67. // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
  68. ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
  69. }
  70. };
  71. // A private function for delaying the mouseOut function
  72. var delay = function(ev,ob) {
  73. ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
  74. ob.hoverIntent_s = false;
  75. return cfg.out.apply(ob,[ev]);
  76. };
  77. // A private function for handling mouse 'hovering'
  78. var handleHover = function(e) {
  79. // copy objects to be passed into t (required for event object to be passed in IE)
  80. var ev = $.extend({},e);
  81. var ob = this;
  82. // cancel hoverIntent timer if it exists
  83. if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
  84. // if e.type === "mouseenter"
  85. if (e.type === "mouseenter") {
  86. // set "previous" X and Y position based on initial entry point
  87. pX = ev.pageX; pY = ev.pageY;
  88. // update "current" X and Y position based on mousemove
  89. $(ob).on("mousemove.hoverIntent",track);
  90. // start polling interval (self-calling timeout) to compare mouse coordinates over time
  91. if (!ob.hoverIntent_s) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
  92. // else e.type == "mouseleave"
  93. } else {
  94. // unbind expensive mousemove event
  95. $(ob).off("mousemove.hoverIntent",track);
  96. // if hoverIntent state is true, then call the mouseOut function after the specified delay
  97. if (ob.hoverIntent_s) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
  98. }
  99. };
  100. // listen for mouseenter and mouseleave
  101. return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
  102. };
  103. })(jQuery);