在区域外的触摸事件上关闭弹出导航模式

Question

我的网站是响应式的，对于狭窄的视图，导航会切换到一个图标，该图标会在点击时显示导航。要关闭导航面板，您可以再次单击图标或导航模式之外的任何位置。这是管理导航模式之外的点击的 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）上，当您点击图标时，它会关闭导航模式，但当您在导航模式之外点击时，什么也不会发生。

我尝试实现此 SO 问题中的代码以将触摸事件映射到点击事件： 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 事件绑定到文档即可使其工作。然后在单击图标时引用原始隐藏/显示功能。但是，这引入了另一个问题，即单击图标有时会双重触发，并且您会出现奇怪的行为。就像关闭然后重新打开一样。不过，我将单独解决这个问题。所以，这就是答案：

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

Answer 2

我将它用于我的网络项目。 可能这适用于移动设备。 试一次:)

//GET ALL CLICK EVENT
$('html').click(function() {
    popmenu();
});

//Popupmenu Hide Function        
function popmenu(){
    var popmenuVisible = $(".popmenuclass").is("visible").toString();
    if (popmenuVisible=="true") {
            $(".popmenuclass").hide();
        }
} 

//IF you click on popupmenu then disable popmenu closing 
$(".popmenuclass").click(function(event){ event.stopPropagation();});