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

Question

我一直在使用一些代码，这些代码在除 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

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

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

编辑

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

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

有什么方法可以从菜单中删除 even 侦听器，如我的示例所示 fiddle？

谢谢

Answer 1

您可以在菜单打开时维护一个标志。然后，您可以在 document 对象上有一个触摸事件处理程序（因为触摸事件在 DOM 树中向上冒泡）。然后，只要您在 document 对象事件处理程序上获得触摸事件，您就会检查两件事：1) 菜单是否打开以及 2) 触摸事件是否在菜单之外？如果是，则关闭菜单。如果不是，则忽略触摸事件并让其正常处理。

如果在菜单打开时，您需要防止菜单外触摸事件的默认行为，那么您可能需要做更多的工作，在菜单打开时进行捕获或使用透明 div 在菜单下方，但在 window 的其余部分之上，它会拦截外部触摸事件，因此不会被其他任何东西处理。

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

Hiding div using "visibility:hidden" on IOS devices

html

jquery

visibility

touch

ios