跨浏览器问题

2018-7-13    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

写在前面的话

关于跨浏览器问题一直是一个大问题， 所以我决定在此做一个记录， 当然不可能把跨浏览器问题一下子都搞定， 所以该文章将是一个长期的过程， 当coding时遇到了， 就会完善该文。

添加事件 

var EventUtil = { /*
     *添加事件
    */ addHandler: function(element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler, false)
        }else if(element.attachEvent){ element.attachEvent('on'+type, handler)
        }else{ element['on'+type] = handler
        }
    }, /*
     *删除事件
    */ removeHandler: function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false)
        }else if(element.detachEvent){ element.detachEvent('on'+type, handler)
        }else { element['on'+type] = null }
    }, /*
     *获得事件对象
    */ getEvent: function(event){ return event ? event : window.event  //ie浏览器的事件对象是window对象的属性， 所以需要window.event来获取。 }, /*
     *获得事件对象的事件目标（触发事件的事件目标）
    */ getTarget: function(event){ return event.target || event.srcElement //这是||符号的另一种用法， 遇到true就返回。 }, /*
     *阻止默认事件
    */ preventDefault: function(event){ if(event.preventDefault){
            event.preventDefault
        }else{
            event.returnValue = false }
    }, /*
     *阻止事件冒泡
    */ stopPropagation: function(event){ if(event.stopPropagation){
            event.stopPropagation()
        }else {
            event.cancelBubble = true }
    }

}  // stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获，也可以阻止处于目标阶段。
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    • 

        
  • 
            37
        
    • 

        
  • 
            38
        
    • 

        
  • 
            39
        
    • 

        
  • 
            40
        
    • 

        
  • 
            41
        
    • 

        
  • 
            42
        
    • 

        
  • 
            43
        
    • 

        
  • 
            44
        
    • 

        
  • 
            45
        
    • 

        
  • 
            46
        
    • 

        
  • 
            47
        
    • 

        
  • 
            48
        
    • 

        
  • 
            49
        
    • 

        
  • 
            50
        
    • 

        
  • 
            51
        
    • 

        
  • 
            52
        
    • 

        
  • 
            53
        
    • 

        
  • 
            54
        
    • 

        
  • 
            55
        
    • 

        
  • 
            56
        
    • 

        
  • 
            57
        
    • 

        
  • 
            58
        
    • 

        
  • 
            59
        
    • 

        
  • 
            60
        
    • 

        
  • 
            61
        
    •

ajax事件

关于xhr对象， ie7需要之前的需要使用ActiveXObject对象来实现， 而且存在三个不同的版本。 虽然现在已经不用兼容ie7以前的浏览器了， 还是可以了解一下： 
//适用于IE7之前的版本 

function createXHR(){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
        i,
        len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳过 }
        }
    } return new ActiveXObject(arguments.callee.activeXString)
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    •

//最终版本 

function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest()
    }else if(typeof ActiveXObject != 'undefined'){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
        i,
        len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳过 }
        }
    } return new ActiveXObject(arguments.callee.activeXString)
    }else { throw new Error("NO XHR object availabel")
    }
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

分享本文至：
« 设计师如何正确的设计好自己的人生？ B站为何能在一片红海的视频市场中生存？ »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档