Mouseenter + Click event with only one tap on WP8.1

Question

I am trying to fix my dropdown menu for IE10/11 on WP8.1.

I have a drop down menu that on mouseenter or onclick activates a submenu. Also onclick function checks, if the submenu is already visible - redirect to the destination (parent menu has href).

PC: mouseenter - I see submenu, if I click on parent - I got redirected.

iOS: first click on the menu - shows submenu, second click - redirect.

WP: first click execute both events! Mouseenter - so it shows submenu and then onclick - so it redirects me. Bad.

How can I fix it?

I tried to:

1. touch-action: none;
2. Set a timer between 2 events, but it is quite big! 300-500 ms, so I cannot use it always.

This code works thanks to timer, I've added a check on IEMobile browser to fix a quick click on PC. But it's bad, how it can be improved?

$('.sideSliderParent').click(function(e) {
    var path = $(this).children('a').attr('href');
    var subID = $(this).attr('data-submenu-id');
    var diff = Date.now() - timeMouseOverWP;
    // check if submenu displayed
    var isDisplayed = true;
    if (subID) {
        isDisplayed = ($('#' + subID).css('display') == 'block');
    }
    e.preventDefault();
    if (subID && path != '' && path != '#' && isDisplayed && (diff>500 || !navigator.userAgent.match(/IEMobile/i))){
        document.location.href = path;
    }
    if (isDisplayed==false){
        activateSubmenu(this);
    }
    e.stopImmediatePropagation();
});

• onmouseenter just activateSubmenu.

Answer 1

Take a look at the touch events.

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events