DOM（十四）：代理检测和事件处理（跨浏览器）

￡神魔★判官ぃ 2022-08-06 09:27 166阅读 0赞

**一、检测**

用于用户代理检测，检测范围包括浏览器引擎、平台、Windows、移动设备和游戏系统等

/*
    *用户代理检测脚本，检测范围包括浏览器引擎、平台、Windows、移动设备和游戏系统
    */
    var client = function()
    {
        //呈现引擎
        var engine = {
            ie:0,           //ie
            gecko:0,    //火狐
            webkit:0,   //chrome和safari
            khtml:0,     //Linux下的Konqueror
            opera:0,     //opera
            ver:null      //完整版本号
        };
        
        //浏览器
        var browser = {
            ie:0,
            firefox:0,
            safari:0,
            konq:0,
            opera:0,
            chrome:0,
            ver:null        //具体版本号
        };
    
        //平台、设备和操作系统
        var system = {
            //操作系统
            win:false,
            mac:false,
            xll:false,       //UNIX
    
            //移动设备
            iphone:false,
            ipod:false,
            ipad:false,
            ios:false,
            android:false,
            nokiaN:false,      //诺基亚
            winMobile:false,  //windows mobile
    
            //游戏系统
            wii:false,          //Wii
            ps:false            //Playstation 3
        };
    
        //检测呈现引擎和浏览器
        var ua = navigator.userAgent;
        if(window.opera)
        {
            engine.ver = browser.ver = window.opera.version();
            engine.opera = browser.opera = parseFloat(engine.ver);
        }
        else if(/AppleWebkit\/(\S+)/.test(ua ))
        {
            engine.ver = RegExp["$1"];
            engine.webkit = parseFloat(engine.ver);
    
            //确定是chrome还是safari
            if(/Chrome\/(\S+)/.test(ua))
            {
                browser.ver = RegExp["$1"];
                browser.chrome = parseFloat(browser.ver);
            } 
            else if(/Version\/(\S+)/.test(ua))
            {
                browser.ver = RegExp["$1"];
                browser.safari = parseFloat(browser.ver);
            }
            else
            {
                // 近似确定版本号
                var safariVersion = 1;
                if(engine.webkit < 100)
                {
                    safariVersion = 1;
                }
                else if(engine.webkit < 312)
                {
                    safariVersion = 1.2;
                }
                else if(engine.webkit < 412)
                {
                    safariVersion = 1.3;
                }
                else
                {
                    safariVersion = 2;
                }
                browser.safari = browser.ver = safariVersion;
            }
        }
        else if(/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^; ]+)/.test(ua))
        {
            engine.ver = browser.ver = RegExp["$1"];
            engine.khtml = browser.konq = parseFloat(engine.ver);
        }
        else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua))
        {
            engine.ver = RegExp["$1"];
            engine.gecko = parseFloat(engine.ver);
    
            // 确定是不是FireFox
            if(/firefox\/(\S+)/test(ua))
            {
                browser.ver = RegExp["$1"];
                browser.firefox = parseFloat(engine.ver);
            }
        }
        else if(/MISE ([^; ]+)/.test(ua))
        {
            engine.ver = browser.ver = RegExp["$1"];
            engine.ie = browser.ie = parseFloat(engine.ver);
        }    
    
        // 检测浏览器
        browser.ie = engine.ie;
        browser.opera = engine.opera;
    
        // 检测平台
        var p = navigator.platform;
        system.win = p.indexOf("Win") == 0;
        system.mac = p.indexOf("Mac") == 0;
        system.xll = (p == "xll") || (p.indexOf("Linux") == 0);
    
        // 检测windows操作系统
        if(system.win)
        {
            if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua))
            {
                if(RegExp["$1"] == "NT")
                {
                    switch(RegExp["$2"])
                    {
                        case "5.0":
                            system.win = "2000";
                            break;
                        case "5.1":
                            system.win = "XP";
                            break;
                        case "6.0":
                            system.win = "Vista";
                            break;
                        case "6.1":
                            system.win = "7";
                            break;
                        default:
                            system.win = "NT";
                            break;
                    }
                }
                else if(RegExp["$1"] == "9x")
                {
                    system.win = "ME";
                }
                else
                {
                    system.win = RegExp["$1"];
                }
            }
        }
    
        // 移动设备
        system.iphone = ua.indexOf("iPhone") > -1;
        system.ipod = ua.indexOf("iPod") > -1;
        system.ipad = ua.indexOf("iPad") > -1;
        system.nokiaN = ua.indexOf("NokiaN") > -1;
    
        // windows mobile
        if(system.win == "CE")
        {
            system.winMobile = system.win;
        }
        else if(system.win == "Ph")
        {
            if(/Windows Phone OS (\d+.\d+)/.test(ua))
            {
                system.win = "Phone";
                system.winMobile = parseFloat(RegExp["$1"]);
            }
        }
    
        // 检测IOS版本
        if(system.mac && ua.indexOf("Mobile") > -1)
        {
            if(/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua))
            {
                system.ios = parseFloat(RegExp.$1.replace("_","."));
            }
            else
            {
                system.ios = 2;
            }
        }
    
        // 检测Android
        if(/Android (\d+\.\d+)/.test(ua))
        {
            system.android = parseFloat(RegExp.$1);
        }
    
        // 游戏系统
        system.wii = ua.indexOf("Wii") > -1;
        system.ps = /playstation/i.test(ua);
    
        // 返回结果
        return {
            engine:engine,
            browser:browser,
            system:system
        };
    }();

**二、事件的跨浏览器处理**

/* *参数：ele-->元素，type-->事件类型，不带on,handler-->事件处理程序 */ var EventHandler = { addHandler:function(ele,type,handler){               //添加处理程序 // DOM2级事件处理 if(ele.addEventListener){ ele.addEventListener(type,handler,false); }else if(ele.attachEvent){ ele.attachEvent("on"+type,handler); }else{ // DOM0级事件处理 ele["on"+type] = handler; } }, removeHandler:function(ele,type,handler){            //删除处理程序 if(ele.removeEventListener){ ele.removeEventListener(type,handler,false); }else if(ele.detachEvent){ ele.detachEvent("on"+type,handler); }else{ ele["on"+type] = null; } }, getEvent:function(event){ //获取事件对象 return event?event:window.event; }, getTarget:function(event){ //获取事件目标 return event.target || event.srcElement; }, preventDefault:function(event){ //阻止事件默认行为 if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation:function(event){ //阻止事件流 if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }, getRelatedTarget:function(event){ //在mouseover和mouseout中获取相关元素 if(event.relatedTarget){ return event.relatedTarget; }else if(event.toElement){ //IE8及以下版本不支持relatedTarget属性 return event.toElement; }else if(event.fromElement){ return event.fromElement; }else{ return null; } }， getWheelDelta:function(event){ //获取鼠标滚轮数据 if(event.wheelDelta){ return (client.engine.opera && client.engine.opera < 9.5?-event.wheelDelta:event.wheelDelta); }else{ return –event.detail*40; //针对FireFox } }, getCharCode:function(event){ //获取字符编码 if(event.charCode == “number”){ return event.charCode; }else{ return event.keyCode; } }, };

存在的不足之处敬请见谅。

原文首发：[http://www.ido321.com/1403.html][http_www.ido321.com_1403.html]

[http_www.ido321.com_1403.html]: http://www.ido321.com/1403.html