Got a bit of a jquery issue between hover() and click() for touchscreens

it seems that hover actions always get triggered before the click and that creates a logical problem because the click event uses an if( $("div").hasClass("is-active") to determin if is needs to remove all the active classes - trouble is that the just got added by the hover() so no matter if the click function has an if-condition it get's executed and removes the active state from the element which I tried to work around by adding a counter - so the click event only fires on the second click but that still leaves some mysteries. Probably it's that hover() is a combination of mouseenter() and mouseleave() but on a touchscreen there the mouseleave never get's triggered when clicking inside the active element with the mouseenter

Please check attached file and also, URL of this is in the internal ticket.

Thanks in advance.

  • Ash

    Hello Peter

    How's about try to disabling hover on touchescreen? On mobile, hover is not even effective. You can use off method to disable hover on touchstart event. Here is a trick you can try: https://stackoverflow.com/questions/14388813/jquery-preventing-hover-function-on-touch

    Also, I guess you were checking on mobile device instead of resizing the browser, right?

    Have a nice day!

    Cheers,
    Ash

  • Peter

    Hi Ash,

    thanks for your feedback. Creating a click()-routine for mobile devices and a hover()-routine for big screens would have been my plan b.

    hover() seems to execute just fine in newer browsers on mobile. Brief look at google seems to date questions to that topic to around 2013 where hover() didn't work on mobile devices. Feels like something has changed with regard to how browsers handle hover() on mobile devices somewhen in the past 5 years or so.

    Using off() to stop hover() on mobile devices seems like only part of the final solution. I would probably also have to disable the click() for big screens to avoid unwanted behaviour.

    And I have a gut feeling this approach will create a problem for devices that have both mouse and touchscreen. So I what I really would need to address is how to determine where the event is coming from: a real mouseclick or a tap on the screen.
    Which still might leave a logical hole since newer browser seem to interpret (first) tap on mobile screen as a mouseenter() when it comes to hover(). The mouseleave() then is triggered by tapping anywhere outside of the mouseenter()-object followed by mouseenter() - if defined - for the second tap.

    In any case I have a really hard time imagining any scenario that will not create a logical problem one way or another and is absolutely bulletproof. E.g. if I go by screensize it will leave a problem for devices with both mouse and touchscreen. Granted, that will only be a minority of use cases. But still. It feels weird that I can't even picture a 100% solution to the problem at the moment. No matter what I think of it seems to solve one problem just to create another problem somewhere else.

    aaaah.... unless.... :slight_smile:
    .on('touchstart',function() {} ) to enable the click()
    then hopefully the click will only be executed on screen tap and not on mouseclick anymore.
    And .off('touchstart',function() {} ) to disable the hover() when using screentap.
    With the final touch of making sure the hover() will be available again when the tap finishes so that both click and hover can be exectuted again for the next event on devices with both touch and mouse.

    Cheers,
    Peter