js中的常见的兼容问题

window对象的属性：

可视区域的宽度：window.innerWidth || document.documentElement.clientWidth(兼容IE) || document.body.clientWidth

可视区域的宽度：window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

页面滚动条距离顶部的距离：document.documentElement.scrollTop || document.body.scrollTop

页面滚动条距离左边的距离：document.docimentElement.scrollLeft || document.body.scroll Left

event兼容：var eve=event || window.event

(键盘事件)     var keyC=eve.keyCode(IE) || eve.which    

阻止事件冒泡函数封装：   

function del(){

扫描二维码关注公众号，回复： 7340942 查看本文章

           var e = event || window.event;

           if(e.stopPropagation){   // 通用方式阻止冒泡行为

               e.stopPropagation();

           }else{    //IE浏览器

               event.cancelBubble = true;

           }

阻止默认行为的函数封装: 

function stopDefault(event) {

     var e = event || window.event;

     if (e.preventDefault){

         e.preventDefault();   // 标准浏览器

     }else{

         e.returnValue = false; // IE浏览器

     }

}

DOM2级事件的封装：  

function addEvent(obj,inci,back){

         if(obj.addEventListener){

             obj.addEventListener(inci,back);

         }else if(obj.attachEvent){

             obj.attachEvent("on" + inci,back);

         }else{ // 以上都不支持则绑定DOM1级事件

             obj["on"+inci] = back;

         }

     }

移除事件监听:

function removeEventListener(obj,event,fn,boo){

        if( removeEventListener){

            obj.removeEventListener(event,fn,boo)

        }else if(detachEvent){

            obj.detachEvent('on'+event,fn);

        }else{

            obj['on'+event]=null;//这里注意,在移除时直接设置为空就好了

        }

    }

事件源target获取的兼容写法:

        var e = eve || window.event;

        var target = e.target || e.srcElement;

非行内样式的获取：

     节点对象.currentStyle[属性]  IE浏览器

     getComputedStyle(节点对象).属性 非IE浏览器。  获取属性的属性值。

通过byClassName获取页面元素的兼容

    //分析:如果支持就直接获取，如果不支持，通过byTagName获取，需要遍历所有的标签，找到需要的className的元素

    function byClassName(obj,className){

        if(obj.getElementsByClassName){

            return obj.getElementsByClassName(className);

        }

        else{

            var arr=[];

            var eles=obj.getElementsByTagName('*');

            for(var i=0,len=eles.length;i<len;i++){

                if(eles[i].className==className){

                    arr.push(eles[i]);

                }

            }

            return arr;

        }

    }