原生js兼容性问题

喜欢ヅ旅行 2021-09-17 17:44 380阅读 0赞

1. 获取标签样式的兼容性问题

1. getComputedStyle(node,null).value 不支持IE8以及以下
      第一个参数是节点对象,第二个参数是伪类,没有为null
    2.node.currentStyle.vale 是IE专有的
    function getStyleValue(node,propertyName){
        if(node.currentStyle)
            return node.currentStyle[propertyName];
        return getComputedStyle(node,null).[propertyName];
    }

获取元素的样式

/**
     * @param ele 元素
     * @param attr 字符串的属性名(写完整)
     * @returns {*} 属性值.
     */
    function getStyle(element,attribute){
        //能力检测
        if(element.currentStyle){
            //如果进到这里来了,说明当前浏览器支持currentStyle,说明当前的浏览器是ie8和ie8之前的版本.
            return element.currentStyle[attribute];
        }else {
            //如果进到这里来了.说明ele.currentStyle是undefined.说明当前的浏览器是谷歌或者火狐.
            return window.getComputedStyle(element,null)[attribute];
        }
    }

2.获取节点的兼容性考虑

document.getElementsByClassName() 在IE8及以下有兼容性问题
      建议使用document.querySelector("")
      建议使用document.querySelectorAll("")

3.获取body的2种方式

标准 : document.body
    火狐 : document.documentElement
        兼容性写法: 
        例如: var v = document.body.scrollTop||documentElement.scrollTop

4.获取页面滚出去的部分(top,left)

/**
     * window.pageYOffset   谷歌 火狐
     * document.documentElement.scrollTop   ie8
     * @returns {
       {top: (Number|number), left: (Number|number)}}
     */
    function getScroll(){
        return {
            scrollTop: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            scrollLeft: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
        }
    }

5.获取页面可视区的宽和高

/**
     * window.innerWidth  谷歌 火狐
     * document.documentElement.clientWidth  ie8
     * @returns {
       {clientWidth: (Number|number), clientHeight: (Number|number)}}
     */
    function getClient(){
        return {
            clientWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            clientHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        }
    }

6.oninput的有兼容性問題---  
7.事件对象有兼容性问题  event

其他版本
     .onclick = function(e){
    }
    在IE8 兼容性解决: window.event
    兼容性写法 : 
    document.keydowm = function(e){
         e=e||window.event;
         console.log(e);
    }

8.事件目标的兼容性问题  traget

// 标准 : e.traget
    //IE8兼容 : e.srcElement
    document.keydowm = function(e){
         e=e||window.event;
         console.log(e.traget||e.srcElement);
    }

获取鼠标在页面上的位置

/**
     *ie8和ie8之前的浏览器,不支持e.pageX和e.pageY, 所以针对ie8及以前的浏览器要做计算.
     * @param e 事件对象
     * @returns {
       {pageX: (Number|number), pageY: (Number|number)}}
     */
    function getEventPage(e){
        e = e || window.event;
        return {
            pageX: e.pageX || e.clientX + document.documentElement.clientLeft,
            //谷歌        ||           可视区clientX + 滚出去的部分(ie8).
            pageY: e.pageY || e.clientY + document.documentElement.clientTop
        }
    }

9.阻止事件的默认行为的兼容性问题

标准 : e.preventDefault();
    IE8:    e.returnValue =false
    通用 : 在函数的最后面 return false;
    兼容性写法 :
    
    function	stopBubble(e) {
        e = e || window.event; 
        if(e.preventDefault) {
            //谷歌 火狐
            e.preventDefault();
        }else{
            //ie8及以前支持
            e.returnValue = false;
        }
    }
    
    
    比如：阻止默认动作 -- 阻止a标签跳转
    
    /**
     * @param e
     */
    function prEventValue(e) {
        e = e || window.event;
        if(e.preventDefault){
            //标准方法
            e.preventDefault();
        }else {
            //ie8及以前支持
            e.returnValue = false;
        }
    }

10.阻止事件冒泡的兼容性问题

标准 : e.stopPropagation()
    IE8 : e.cancelBubble=true;
    兼容性写法: 
     if(e.stopPropagation)
         e.stopPropagation(); 
    else 
        e.cancelBubble=true;

11.事件监听绑定的兼容性问题

标准 : 
            事件类型例如 : click mousemove等等,就是要去掉on
            绑定:  事件目标.addEventListener(事件类型,绑定事件,是否捕获)
            解绑 :  事件目标.removeEventListener(事件类型,解绑的函数)
            调用顺序: 先绑定的先执行
    IE8 :  
            事件类型: 必须加上on ,例如 onclick,onmousemove
            绑定 : 事件目标.attachEvent(事件类型,绑定事件)
            解绑 : 事件目标 detachEvent(事件类型,解绑事件)
            调用顺序: 后绑定的先调用
            注意; 事件只能是冒泡,不支持捕获
    
    兼容性写法: 
        /**
        *事件绑定函数
        * @param node : 事件目标
        * @param type:   事件类型
        * @param fn:       事件函数
        */
         function addEventListner(node,type,fn){
             if(node.addEventListener){
                node.addEventListener(type,fn);
            }else{
                type="on"+type;
                node.attachEvent(type,fn);
            }
        }
        /**
        *事件解除绑定函数
        * @param node : 事件目标
        * @param type:   事件类型
        * @param fn:       事件函数
        */
         function removeEventListener(node,type,fn){
             if(node.addEventListener){
                node.removeEventListener(type,fn);
            }else{
                type="on"+type;
                node.detachEvent(type,fn);
            }
        }

12.不同的浏览器,对同一个元素设置多个相同的事件,方式不一样,所以要做兼容处理

/**
     * @param obj  给谁设置事件
     * @param type  事件名称  string类型的
     * @param fn  事件处理程序
     */
    function setAddEventListener(obj,type,fn){
        if(obj.attachEvent){
            //ie8及以前
            obj.attachEvent("on" + type,fn);
        }else if(obj.attachEvent == undefined){
            //谷歌 火狐等
            obj.addEventListener(type,fn,false);
        }else{
            obj["on" + type] = fn;
        }
    }

13.移除事件在不同浏览器中,处理的方式不一样,所以要做兼容处理

/**
     * @param obj  给谁设置事件
     * @param type  事件名称  string类型的
     * @param fn  事件处理程序
     */
    function setRemoveEventListener(obj,type,fn){
        if(obj.detachEvent){
            //ie8及以前
            obj.detachEvent("on" + type,fn);
        }else if(obj.detachEvent == undefined){
            //谷歌 火狐等
            obj.removeEventListener(type,fn,false);
        }else {
            obj["on" + type] = fn;
        }
    }

14 .DOMContentLoaded 的兼容性问题  
15.XMLHttpRequest兼容性问题  
16.JSON 对象的兼容性问题  
17. cc:ie6 emmic语法 显示iE的条件注释  
18 .IE8以下.trim()会失效