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

Question

我有一個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);

Answer 1

第一個也是最重要的是觸摸設備沒有點擊事件。 Mobile Safari模擬click，mouseover和mouseout事件。 Apple可能已經改變了它在iOS 5中確定點擊的方式。

檢查以確保懸停處理程序未捕獲事件。 我首先在您的iOS設備上啟用開發人員控制台，然后為每個事件添加日志記錄。 這應該告訴你什么事件被解雇以及什么時候被解雇。

要解決此問題，您可能需要檢查設備是否支持觸摸事件。 像"ontouchstart" in window類的東西應該可以解決問題並且只綁定該設備所需的事件（懸停或點擊）。