modify hoverIntent to handle touch events on mobiles

Question

Good day all.

I'm having some problems with hoverintent.js a jquery plugin that handle the mouseOver events in a different way than normal. Due to some complications, I can't modifiy anything but the js of this plugin, but I need to make it compliant with touch events and not only with mouseOver and mouseLeave.

after some debugs, I have managed to recognize this part of the code to be the one to modify:

var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
                var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
                while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
                if ( p == this ) { return false; }

                // copy objects to be passed into t (required for event object to be passed in IE)
                var ev = jQuery.extend({},e);
                var ob = this;

                // cancel hoverIntent timer if it exists
                if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

                // else e.type == "onmouseover"
                if (e.type == "mouseover") {
                    // set "previous" X and Y position based on initial entry point
                    pX = ev.pageX; pY = ev.pageY;
                    // update "current" X and Y position based on mousemove
                    $(ob).bind("mousemove",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 );}

                // else e.type == "onmouseout"
                } else {
                    // unbind expensive mousemove event
                    $(ob).unbind("mousemove",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 );}
                }

            }
        };

        // bind the function to the two event listeners
        return this.mouseover(handleHover).mouseout(handleHover);

what I've done so far is to make the function working different with mobiles:

            var handleHover = function(e) {

    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);


    if(isMobile){
          console.log("Ismobile");

    }else{
            ... Same code as before here ...
             }

            // bind the function to the two event listeners
        return this.mouseover(handleHover).mouseout(handleHover);

and now i'm struck. I would like it to "change" its behavior to handle the touch, and not the mouse over event, so on mobiles I will need to touch the element, instead to hovering on it. May someone give me an help? Am I on the right way? Is it the right way to think of it?

unluckily I have only the possibility to change this file and some few more.

Answer 1

Recently i bumped into several problems with changing hoverIntent.js, and ended up in writing my own plugin: hoverDelay.js (much simpler, and less code). see if you can use it, and modify it to your own needs (and maybe contribute the mobile code to it :-)