常用浏览器兼容问题

本文面向的是原生JS有关高级浏览器（主要指Chrome、FireFox和IE8+）和IE8-之间的兼容。部分来自网络，可以说是抱了很多大腿，我只是一个Web前端界的小学生，不扯了，具体如下，包括：

• 可视区相关
• 滚动相关
• 获取对象属性
• event事件
• 触发事件
• 禁止默认事件
• 禁止时间冒泡
• 添加DOM2级事件
• 判断是否为数组

---

可视区相关

1.获取可视区宽度

var cw = 0;cw = document.documentElement.clientWidth||document.body.clientWidth;

2.获取可视区高度

var ch = 0;ch = document.documentElement.clientHeight||document.body.clientHeight;

滚动相关

1.滚动条宽度（一般指设置的页面宽度）

var sw = 0;sw = document.documentElement.scrollWidth||document.body.scrollWidth;

2.滚动条高度（一般指设置的页面高度）

var sh = 0;sh = document.documentElement.scrollHeight||document.body.scrollHeight;

3.上下滚动距离

var st = 0;st = document.documentElement.scrollTop||document.body.scrollTop;

4.左右滚动距离

var sl = 0;sl = document.documentElement.scrollLeft||document.body.scrollLeft;

获取对象属性

var objAttr = '';if(window.getComputedStyle){    objAttr = window.getComputedStyle(obj,null)[attr];}else if(obj.currentStyle){    objAttr = obj.currentStyle[attr];//for IE8-}else{    return obj.style[attr]}

event事件 （常与触发事件同时写，在这里我写在一起）

function myEvent(e){    this.event = e||window.event;//获取event事件    return this.event.target||this.event.srcElement;//返回触发事件的对象}

禁止默认事件（例如拖拽对话框是不想选中其内容，就可以使用这个函数）

function cancelDefaultEvent(){    if(this.event.preventDefault){        this.event.preventDefault();    }else {        window.event.returnValue = false;    }        return false;}

禁止事件冒泡（有些同学不知道事件冒泡是什么鬼的，自行百度，这里简单提一下，事件冒泡就是嵌套的几个对象从里到外地执行事件，禁止事件冒泡就是让事件进行到禁止的对象就停止，不继续往外执行）

function cancelPropagation() {    if(this.event.stopPropagation){        this.event.stopPropagation();    }else {        window.event.cancelBubble = true;    }        return false;};

添加DOM2级事件（附带删除）

function add2Event(obj,eve,fn){//obj表示被添加的对象，eve表示事件名（之前不用加‘on’），fn则是需要执行的函数    if(obj.attachEvent){        return obj.attachEvent('on'+eve,fn);    }else{        return obj.addEventListener(eve,fn);    }};//一下为删除DOM2级事件function remove2Event(obj,eve,fn){    if(obj.detachEvent){        return obj.detachEvent('on'+eve,fn);    }else{        return obj.removeEventListener(eve,fn);    }};

判断是否为数组（最后一个了，同学们终于可以吃饭了~）

function judgementArray(obj){    if (Array.isArray) {        this.res = Array.isArray(obj);        isArray = function () {            return window.res;        }    } else {        this.res = obj.constructor == Array;        isArray = function () {            return window.res;        }    }        return this.res;}

最后，以上的几种兼容只是我平时常用到的，毕竟是小白，离全方位还差得远，大神们如果有补充还请指教:-D