在 IOS 设备上使用 "visibility:hidden" 隐藏 div

我一直在使用一些代码，这些代码在除Ipad和iPhone之外的所有浏览器和设备上都按照我的喜好工作。问题是我不确定如何实现触摸事件，通过点击选定的div 然后将其隐藏。

<body>
<div id="main_nav">
<ul id="nav">
<li class="nav">
<a href="#" onmouseout="mclosetime()" onmouseover="mopen('m1')">
<span class="nav_parent">CONTACT</span></a> 
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Link 1</a>  
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li></ul></div>
</body>

var timeout = 50;
var closetimer = 10;
var ddmenuitem = 0;
// open hidden layer
function mopen(id) {
    // cancel close timer
    mcancelclosetime();
    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose() {
    if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime() {
    closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
}}
document.onclick = mclose;
// close layer when click-out

下面是一个小提琴来演示我所拥有的。如前所述，我意识到我正在使用鼠标悬停事件，这些事件可以在桌面浏览器甚至 android 设备上按预期工作。我只是在寻找一种方法，当我点击屏幕上的其他地方时关闭打开的子菜单div（css 发布在小提琴中）。

https://jsfiddle.net/t859A/28/

编辑

我添加了以下代码，该代码在触摸文档时成功关闭子菜单，但是当触摸菜单中的链接时也会关闭。

window.addEventListener('load', function mclose(){
document.body.addEventListener('touchstart', function(e){
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}, false)
}, false)

有没有办法从菜单中删除偶数侦听器，如我的示例小提琴所示？

谢谢

您可以在菜单打开时维护一个标志。然后，您可以在document对象上有一个触摸事件处理程序（因为触摸事件在 DOM 树中冒泡）。然后，每当您在 document 对象事件处理程序上获得触摸事件时，请检查两件事：1）菜单是否打开，2）触摸事件是否在菜单之外？如果是这样，请关闭菜单。如果没有，则忽略触摸事件，让它的正常处理处理它。

如果在菜单打开

时，需要阻止菜单外触摸事件的默认行为，则可能需要执行更多工作，在菜单打开时使用捕获或在菜单下方使用透明div，但在拦截外部触摸事件的窗口的其余部分，使其不被其他任何内容处理。

相关内容

最新更新

热门标签：