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

Make pop out nav modal close on touch event outside area

本文关键字:事件 触摸 外部 区域 导航 模式      更新时间:2023-09-26

我的网站是响应性的,对于狭窄的视图,导航切换到一个图标,显示单击导航。要关闭导航面板,您可以再次单击图标或单击导航模式外的任何位置。这是用来管理导航模式之外的点击的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将触摸事件映射到鼠标事件

然而,这对我不起作用。

我将代码粘贴在$(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);        
}
});

通过简单地将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");
    }
});

我正在使用这个为我的web项目。也许这将适用于移动设备。试一次:)

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