javascript - 使弹出导航模式靠近区域外的触摸事件

Question

我的网站具有响应能力，对于狭窄的 View ，导航会切换到一个图标，在单击时显示导航。要关闭导航面板，您可以再次单击该图标或导航模式之外的任何位置。这是管理导航模式之外的点击的 JS:

$(document).mousedown(function(e) {
    var clicked = $(e.target);
    if (clicked.is("#navigation") || clicked.parents().is("#navigation") || clicked.is("#hamburger-nav-link")) {
        return;
    } else {
        $("#hamburger-nav-link").removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
});

在移动设备(好吧，我的 iPhone)上，当您点击图标时，它会关闭导航模式，但是当您点击导航模式之外时，什么也不会发生。

我尝试实现此问题中的代码以将触摸事件映射到单击事件: JavaScript mapping touch events to mouse events

但这对我来说不起作用。

我将代码粘贴到 $(document).mousedown() 函数下方，它全部位于通用 jQuery 函数中。我粘贴了下面的代码，以便您可以看到整个内容。该文件在每个页面末尾的结束标记之前调用。

非常感谢任何帮助，谢谢!

$(函数(){

// Mobile nav
$("#hamburger-nav-link").click(function() {
    if ($("#navigation").hasClass("mobile-nav")) {
        $(this).removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
    else {
        $(this).addClass("hamburger-nav-active");
        $("#navigation").addClass("mobile-nav");
    }

    return false;
});

// Close modal if click event is outside of it
$(document).mousedown(function(e) {
    var clicked = $(e.target);
    if (clicked.is("#navigation") || clicked.parents().is("#navigation") || clicked.is("#hamburger-nav-link")) {
        return;
    } else {
        $("#hamburger-nav-link").removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
});

function touchHandler(event)
{
        var touches = event.changedTouches,
                first = touches[0],
                type = "";
                 switch(event.type)
        {
                case "touchstart": type = "mousedown"; break;
                case "touchmove":    type="mousemove"; break;                
                case "touchend":     type="mouseup"; break;
                default: return;
        }

                         //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
        //                     screenX, screenY, clientX, clientY, ctrlKey, 
        //                     altKey, shiftKey, metaKey, button, relatedTarget);

        var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                                            first.screenX, first.screenY, 
                                                            first.clientX, first.clientY, false, 
                                                            false, false, false, 0/*left*/, null);

                                                                                                                                                                 first.target.dispatchEvent(simulatedEvent);
        event.preventDefault();
}

function init() 
{
        document.addEventListener("touchstart", touchHandler, true);
        document.addEventListener("touchmove", touchHandler, true);
        document.addEventListener("touchend", touchHandler, true);
        document.addEventListener("touchcancel", touchHandler, true);        
}

});

Answer 1

只需将 click 和 touchend 事件绑定(bind)到文档即可使其工作。然后在单击图标时引用原始隐藏/显示功能。然而，这引入了另一个问题，即单击图标有时会双重触发，并且您会得到奇怪的行为。就像关闭然后重新打开一样。不过我将单独解决这个问题。所以，答案如下:

两个函数 touchHandler(event) 和 init() 以及 $(document).mousedown(function(e) { ... }) ; 函数和 $("#hamburger-nav-link").click(function() { ... }); 函数替换为以下内容:

var navModalView = function() {
    if ($("#navigation").hasClass("mobile-nav")) {
        $("#hamburger-nav-link").removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
    else {
        $("#hamburger-nav-link").addClass("hamburger-nav-active");
        $("#navigation").addClass("mobile-nav");
    }

    return false;
}

$(document).bind("click touchend", function(e) {
    var targetEl = $(e.target);

    if (targetEl.is("#navigation") || targetEl.parents().is("#navigation")) {
        return;
    }
    else if (targetEl.is("#hamburger-nav-link")) {
        navModalView();
        event.preventDefault();
    }
    else {
        $("#hamburger-nav-link").removeClass("hamburger-nav-active");
        $("#navigation").removeClass("mobile-nav");
    }
});