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函数中。我已经粘贴了下面的代码，所以你可以看到整个事情。在结束标记之前的每个页面的末尾都会调用此文件。

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

$（function（）{

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

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

2 个答案: