如何讓 mouseover/mouseout 與調整大小一起工作？

Question

我正在處理下拉菜單，它在移動設備和桌面設備上都適用，但我遇到了調整大小的問題。 當我調整大小時，縮小到移動設備時，mouseover 和 mouseout 仍然有效。

$(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")
            });
        });
    }
});

我錯過了什么？

Answer 1

移動設備沒有“鼠標”，所以它們永遠不會觸發“鼠標懸停”，我猜你的問題只出現在使用 chrome 開發人員工具之類的開發中......如果是這種情況，它是由 Chrome DevTools 中的錯誤引起的。

您可以在此處閱讀有關該錯誤的更多信息。

作為解決方法，您可以添加以下內容以驗證您是否真的通過檢測觸摸事件來模擬移動設備：

        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")
           });
        }

（在這個問題上找到的最后一部分）

Answer 2

在屏幕尺寸較小的情況下，您需要刪除mouseover / mouseout事件處理程序：

$(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")
            });
        });
    }
});