如何让 mouseover/mouseout 与调整大小一起工作？

Question

I'm working on a dropdown menu, and it works both on mobile and desktop, but I'm running into an issue with the resizing. When I resize, down to mobile, the mouseover and mouseout is still working.

$(window).on("load resize", function(){
    var width = $(window).width();
        if ($(this).width() < 1023){
            if($(".nav-more").length == 0){
                $(".menu-item-has-children > a").append('<div class="nav-more">+</div>');
            };
        $(".nav-more").on("click", function(e){
            e.preventDefault();
            var cssDisplay = $(this).parent().parent().find('.sub-menu').css("display");
            if (cssDisplay == 'none'){
                $(this).parent().parent().find('.sub-menu').css("display", "contents");
            }
            else{
                $(this).parent().parent().find('.sub-menu').css("display", "none")  
            }
            
        });
    } else if($(this).width() > 1023){
            $(".menu li").mouseover(function(){
                $(this).find('.sub-menu').css("display", "block");
            $(".menu li").mouseout(function(){
                $(this).find('.sub-menu').css("display", "none")
            });
        });
    }
});

What did I miss?

Answer 1

Mobile devices doesn't have a "mouse" so they never trigger "mouseover", i guess your issue goes only at development using something like chrome developer tools... if that's the case it's caused by a bug at Chrome DevTools.

You may read more about the bug here .

As a work around you can add the following to validate if you are actually emulating a mobile device by detecting touch events:

        if ('TouchEvent' in window && 'ontouchstart' in window) {
            $(".menu li").mouseover(function(){
                $(this).find('.sub-menu').css("display", "block");
            $(".menu li").mouseout(function(){
                $(this).find('.sub-menu').css("display", "none")
           });
        }

(Last part found at this question)

Answer 2

You need to remove your mouseover / mouseout event handlers in the case where the screen size is small:

$(window).on("load resize", function(){
    var width = $(window).width();
    if ($(this).width() < 1023){

        $(".menu li").off('mouseover');
        $(".menu li").off('mouseout');

        if($(".nav-more").length == 0){
            $(".menu-item-has-children > a").append('<div class="nav-more">+</div>');
        };

        $(".nav-more").on("click", function(e){
            e.preventDefault();
            var cssDisplay = $(this).parent().parent().find('.sub-menu').css("display");
            if (cssDisplay == 'none'){
                $(this).parent().parent().find('.sub-menu').css("display", "contents");
            }
            else{
                $(this).parent().parent().find('.sub-menu').css("display", "none")  
            }

        });
    } else if($(this).width() > 1023){
            $(".menu li").mouseover(function(){
                $(this).find('.sub-menu').css("display", "block");
            $(".menu li").mouseout(function(){
                $(this).find('.sub-menu').css("display", "none")
            });
        });
    }
});