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

下面是一个演示我所拥有的东西的小提琴。如上所述，我意识到我正在使用鼠标悬停事件，这些事件在桌面浏览器甚至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)

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

由于

Answer 1

菜单打开时，您可以保持标记。然后，您可以在document对象上设置触摸事件处理程序（因为触摸事件会冒出DOM树）。然后，只要你在document对象事件处理程序上获得触摸事件，就会检查两件事：1）菜单是否打开，2）是菜单外的触摸事件？如果是这样，您关闭菜单。如果没有，你忽略触摸事件并让它正常处理它。

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

在IOS设备上使用“visibility：hidden”隐藏div

1 个答案: