iPhone iOS 5 更新后 JavaScript 子菜单不再起作用

Question

我有一个在 Firefox、IE、Safari 和 iPhone/iPad iOS 4 上运行良好的 javascript 菜单。

仅在 iOS 5 更新中，子菜单会非常短暂地显示，然后在单击菜单项时消失。有谁知道他们发生了什么变化以及我该如何解决这个问题？

var dbMenu = {
    init: function(){
        var uls = document.getElementsByTagName('ul');
        for(var i = 0; i < uls.length; i++){
            if(uls[i].className.search(/\bdbMenu\b/) == -1)
                continue;
            var menu = uls[i];

            dbMenu.styleSubMenus(menu);

            addEvent(menu, 'mouseover', dbMenu.hover, false);
            addEvent(menu, 'mouseout', dbMenu.hoverOff, false);
            if(menu.className.search(/\bonMouse\b/) == -1){
                addEvent(menu, 'click', dbMenu.click, false);
            }
            addEvent(menu, 'click', dbMenu.nav, false);
        }    
    },

    hover: function(e){
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;

        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }

        target.className += ' hover';

        var t = (target.className.search(/\bsubMenu\b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu : null;
        if(!t) return;
        clearTimeout(t.timeout);

        if(target.parentMenu.className.search(/\bonMouse\b/) != -1){
            t.className += ' click';
        }
    },

    hoverOff: function(e){
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;

        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }

        target.className = target.className.replace(/hover/g, '');

        if(target.parentMenu.className.search(/\bonMouse\b/) != -1){
            var t = (target.className.search(/\bsubMenu\b/) != -1)? target : (target.parentSubMenu)? target.parentSubMenu: null;
            if(!t) return; 
            t.timeout = setTimeout(function(){ t.className = t.className.replace(/click/g, ''); }, 80);
        }
    },

    click: function(e){
        if(window.event){
            window.event.cancelBubble = true;
        }
        if(e && e.stopPropagation){
            e.stopPropagation();
        }
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;

        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }

        if(target.className.search(/\bclick\b/) == -1){
            target.className += ' click';
        }else{
            target.className = target.className.replace(/click/g, '');
        }
    },

    nav: function(e){
        if(window.event){
            window.event.cancelBubble = true;
        }
        if(e && e.stopPropagation){
            e.stopPropagation();
        }
        var target = (window.event)? window.event.srcElement : (e)? e.target : null;

        if(target){
            target = dbMenu.getTarget(target, 'li');
            if(!target) return;
        }else{
            return;
        }

        for(var i = 0; i < target.childNodes.length; i++){
            var node = target.childNodes[i];
            if(node.nodeName.toLowerCase() == 'a'){
                window.location = node.href;
                break;
            }
        }
    },

    getTarget: function(target, elm){
        if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){
            return dbMenu.getTarget(target.parentNode, elm);
        }else if(target.nodeName.toLowerCase() == 'body'){
            return null;
        }else{
            return target;
        }
    },

    styleSubMenus: function(menu){
        lis = menu.getElementsByTagName('li');
        for(var i = 0; i < lis.length; i++){
            node = lis[i];
            node.parentMenu = menu;
            if(node.getElementsByTagName('ul').length != 0){
                node.className += ' subMenu';
                sublis = node.getElementsByTagName('li');
                for(var j = 0; j < sublis.length; j++){
                    sublis[j].parentSubMenu = node;
                }
            }
        }
    }
}

function addEvent(elm, evType, fn, useCapture){  //cross-browser event handling for IE5+, NS6+, and Mozilla/Gecko By Scott Andrew
    if(elm.addEventListener){
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }else if(elm.attachEvent){
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }else{
        elm['on' + evType] = fn;
    }
}

addEvent(window, 'load', dbMenu.init, false);

Answer 1

首先，也是最重要的一点是，触控设备没有点击事件。 Mobile Safari 模拟单击​​、鼠标悬停和鼠标移出事件。 Apple 可能已经改变了它在 iOS 5 中确定点击的方式。

检查以确保悬停处理程序未捕获事件。我将首先启用developer console on your iOS device 并向每个事件添加日志记录。这应该告诉您正在触发哪些事件以及它们何时被触发。

要修复它，您可能需要检查设备是否支持触摸事件。 "ontouchstart" in window 之类的东西应该可以解决问题，并且只绑定该设备所需的事件（悬停或单击）。