在区域外的触摸事件上使弹出导航模式关闭
在区域外的触摸事件上使弹出导航模式关闭
提问于 2013-04-16 00:43:27
我的网站是响应式的，对于狭窄的视图，导航切换到一个图标，显示点击时的导航。要关闭导航面板，您可以再次单击该图标或单击导航模式之外的任何位置。这是在导航模式之外管理点击的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函数中。我粘贴了下面的代码，这样你就可以看到整个过程了。此文件在结束标记之前的每一页的末尾被调用。
非常感谢您的帮助，谢谢！
$(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);
}
});Stack Overflow用户
回答已采纳
发布于 2013-04-17 00:42:13
只需将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");
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16020466
复制相关文章
相似问题
腾讯云开发者
