[Summary view] [Print] [Text view]

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