使弹出导航模式关闭触摸事件的外部区域
Make pop out nav modal close on touch event outside area
我的网站是响应性的,对于狭窄的视图,导航切换到一个图标,显示单击导航。要关闭导航面板,您可以再次单击图标或单击导航模式外的任何位置。这是用来管理导航模式之外的点击的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();});
相关文章:
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 如何在jquery中找到鼠标滚轮/触摸移动事件的走向
- 如何使用纯javascript的移动触摸事件
- 触摸启动事件未在iframe iOS 6中启动
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 触摸滑动所有事件
- 移动定时触摸事件
- 模拟html5的触摸事件
- Phonegap/Cordova:如何添加Javascript多点触摸事件
- 如何在AngularJS中监听点击事件,而不是触摸事件
- 我可以让我的网站的内容可编辑区域对安卓股票浏览器上的触摸事件更敏感吗
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- 在 Firefox 中“解析”触摸事件
- 将触摸事件转换为鼠标事件仅每秒有效一次
- 在移动 Safari 上向下拖动时,触摸事件停止触发 - iPad HTML5
- 如何在 javascript 中触发触摸事件
- 为什么触摸事件不在手指按压的中间
- 如何启用离子多点触摸事件
- JavaScript事件.触摸数组
- D3鼠标事件触摸事件,即点击->支持触摸事件