From 94958d47424bc113bd098929376634980fbc282b Mon Sep 17 00:00:00 2001 From: usmonster Date: Tue, 18 Jun 2013 19:03:05 +0300 Subject: [PATCH] Adds option to calculate mouse movement relative to visual viewport (window) instead of layout viewport (document) -- UNTESTED When set to true, use `event.clientX/Y` instead of `pageX/Y` to calculate mouse pointer position and movement. This prevents mouse pointer position tracking updates when the mouse is stationary within the window but the document is scrolling, which can be unintuitive behavior in some use cases. Maybe implements briancherne/jquery-hoverIntent#11? Documentation to be updated in a separate commit if deemed acceptable. NB: This is *completely* untested and mostly a proof of concept. --- jquery.hoverIntent.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/jquery.hoverIntent.js b/jquery.hoverIntent.js index 32e499c..505ae0b 100644 --- a/jquery.hoverIntent.js +++ b/jquery.hoverIntent.js @@ -36,7 +36,8 @@ var cfg = { interval: 100, sensitivity: 7, - timeout: 0 + timeout: 0, + ignoreScroll: false }; if ( typeof handlerIn === "object" ) { @@ -48,14 +49,18 @@ } // instantiate variables + // viewport = reference viewport for mouse position, either "page" (layout) or "client" (visual) + // X, Y = event properties used to get position of mouse // cX, cY = current X and Y position of mouse, updated by mousemove event // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval + var viewport = cfg.ignoreScroll ? "client" : "page"; + var X = viewport + "X", Y = viewport + "Y"; var cX, cY, pX, pY; // A private function for getting mouse position var track = function(ev) { - cX = ev.pageX; - cY = ev.pageY; + cX = ev[X]; + cY = ev[Y]; }; // A private function for comparing current and previous mouse position @@ -91,21 +96,21 @@ // cancel hoverIntent timer if it exists if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); } - // if e.type == "mouseenter" - if (e.type == "mouseenter") { + // if e.type === "mouseenter" + if (e.type === "mouseenter") { // set "previous" X and Y position based on initial entry point - pX = ev.pageX; pY = ev.pageY; + pX = ev[X]; pY = ev[Y]; // update "current" X and Y position based on mousemove $(ob).on("mousemove.hoverIntent",track); // start polling interval (self-calling timeout) to compare mouse coordinates over time - if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} + if (ob.hoverIntent_s !== 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );} // else e.type == "mouseleave" } else { // unbind expensive mousemove event $(ob).off("mousemove.hoverIntent",track); // if hoverIntent state is true, then call the mouseOut function after the specified delay - if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} + if (ob.hoverIntent_s === 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );} } };