整理JavaScript的几个常用的兼容

JS兼容性解决方案

最新推荐文章于 2021-11-15 20:02:30 发布

原创最新推荐文章于 2021-11-15 20:02:30 发布 · 229 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #javascript #js #html #html5

本文提供了一系列JavaScript兼容性问题的解决方案，包括获取非行内样式、滚动条垂直距离、事件对象及键盘检测兼容写法、阻止事件冒泡及默认事件、事件监听等关键点，适用于不同浏览器环境。

整理JavaScript的几个常用的兼容

1、获取非行内样式（兼容问题）样式（兼容问题）

function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值
   if(obj.currentStyle){       //针对ie获取非行间样式
       return obj.currentStyle[attr];
   }else{
       return getComputedStyle(obj,false)[attr];   //针对非ie
   };
}

2、获取滚动条移动的垂直距离

var _top = null;
    window.onscroll = function(){
        //兼容问题  获取滚动条移动的垂直距离
        _top = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(_top);
    }
    function fun(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }

3、事件对象的兼容： var e = evt || event;
4、键盘检测兼容写方法

var key = e.keyCode || e.which || e.charCode;

5、阻止冒泡的兼容

 e.stopPropagation()；
e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;

6、阻止浏览器默认事件

e.preventDefault?e.preventDefault():e.returnValue = false;
return  false；

7、事件监听兼容

 function addEvent(obj,type,callBack){
        if(obj.addEventListener){//非IE版本
            obj.addEventListener(type,callBack);
        }else{//IE版本
            obj.attachEvent("on"+type,callBack);
        }
    }
    addEvent(document,"click",function(){alert("document")});