Removing active element not working on tablet mode

Question

so apparently there is an issue regarding hover state of an element in tablet view.

I have made a sample where I have a position-fixed header, inside of it there is an element that can be hovered and will show dropdown content. I'm using additional class to show the dropdown content. Dropdown content will be shown on mouseenter and hidden on mouseleave or when window is scrolled like so:

$('.custom-dropdown').on('mouseenter', function(){
    $(this).children('.dropdown-content').addClass('active');
}).on('mouseleave', function(){
    $(this).children('.dropdown-content').removeClass('active');
})

$(window).scroll(function () {
    document.activeElement.blur();
    $('.custom-dropdown').trigger('mouseleave');
});

Here is the sample: https://jsfiddle.net/tja9scg4/

This works fine in desktop mode using mouse interaction, but the problem occurs only when using tablet view (I use Chrome's developer tools to replicate this). So in tablet mode, if you click on the 'Hover Me', the dropdown content will show. Now try scrolling it and that should hide the dropdown content. But when you click on the 'Hover Me' again, it won't show. I think this happens due to the 'Hover Me' element that is still focused.

So I wonder if anyone can help me on this? Thanks in advance.

Have you tried [handling touch events](https://stackoverflow.com/questions/37113082/detecting-hover-or-mouseover-on-smartphone-browser)? — John Wu, May 23 '18 at 02:39
There is no such thing as hover or mouseover in a touch device. Try to bind the same events with touch events or click and click outside. — muecas, May 23 '18 at 03:27

score 0 · Answer 1 · answered May 23 '18 at 03:39

Thanks for the help, I decided to add click event so the dropdown will always show regardless the hover state. Here's the code:

$('.custom-dropdown').on('mouseenter', function () {
        $(this).children('.dropdown-content').addClass('active');
    }).on('mouseleave', function () {
        $(this).children('.dropdown-content').removeClass('active');
    }).on('click', function () {
        $(this).children('.dropdown-content').addClass('active');
    });

If anyone has the best practice, feel free to share. For now, I think this will work fine..

Removing active element not working on tablet mode

1 Answers1