JavaScript子菜单在iPhone iOS 5更新后不再工作

JavaScript submenu doesn't work anymore after iPhone iOS 5 update

本文关键字:更新 不再 工作 iOS 菜单 iPhone JavaScript      更新时间:2023-09-26

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

只有在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);

首先,也是最重要的一点是,触控设备没有点击事件。Mobile Safari模拟点击、鼠标移过和鼠标移出事件。在iOS 5中,苹果公司可能已经改变了确定点击的方式。

检查以确保事件没有被悬停处理程序捕获。我会首先在你的iOS设备上启用开发者控制台,并为每个事件添加日志记录。这应该告诉你哪些事件正在被触发,以及它们何时被触发。

要修复它,您可能需要检查设备是否支持触摸事件。像"ontouchstart" in window这样的东西应该做到这一点,只绑定该设备所需的事件(悬停或点击)。