原创 JavaScript兼容性汇总

            }

        }

        return dataset;

    }

}

• 操作class方法

classList.add('name') 不兼容ie6 7 8 9

classList.remove('name') 不兼容ie6 7 8 9

解决方法：

function addClass(obj, class){

  if(!this.contains(class)){

    obj.className +=' ' + class;

  }

}

function removeClass(obj,class){

  if(obj.className.indexOf(class) !== -1){

    var reg= new RegExp(class);  

    obj.className =  obj.className.replace(reg,'');

  }

}

节点

• 节点类一起总结: 前面的不兼容ie6

// 获取子节点

var children = obj.children || obj.childNodes

// 获取第一个子节点

var first = obj.firstElementChild || obj.firstChild

// 获取最后一个子节点

var last = obj.lastElementChild || obj.lastChild

// 获取上一个兄弟节点

var prev = obj.previousElementSibling || obj.nextElementSibling

// 获取下一个兄弟节点

var next = obj.nextElementSibling || obj.nextElementSibling

滚动距离

// 有文档头

// - docuemnt.documentElement.scrollTop / scrollLeft

// 没有文档头

// - document.body.scrollTop / scrollLeft

// 兼容

var top = docuemnt.documentElement.scrollTop || document.body.scrollTop

var left = docuemnt.documentElement.scrollLeft || document.body.scrollLeft

• 浏览器可视区大小

// 包含工具条与滚动条

// - document.documentElement.clientWidth / clientHeight

// 不包含工具条与滚动条

// - window.innerWidth / innerHeight

// - 使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度

事件

• 事件对象

// 事件对象

// ev 不兼容ie 6 7 8

// window.event 兼容所有浏览器

document.onclick = function (ev) {

    ev = ev || window.event

}

• 获取页面中鼠标位置

ev.pageX/ev.pageY 不兼容ie6 7 8

解决方案：

var x = ev.clientX + document.documentElement.scrollLeft

var y = ev.clientY + document.documentElement.scrollTop

• 获取键盘码

ev.keyCode 不兼容火狐

ev.which 不兼容 ie6 7 8

解决方案：

 var code = keyCode || which

• 获取事件源

ev.target 不兼容 ie6 7 8

ev.srcElement 兼容所有浏览器

解决方案：

 var src = target || srcElement

• 阻止默认行为

ev.preventDefault() 不兼容ie6 7 8

ev.returnValue = false 兼容所有浏览器

解决方案：

function stopDefault(ev) {

    if (ev && ev.preventDefault) {

        ev.preventDefault()

    } else {

        event.returnValue = false

    }

    return false;

}

• 阻止事件冒泡

e.stopPropagation() 不兼容ie6 7 8

ev.cancelBubble = true 兼容所有浏览器

解决方案：

function stopPropagat(ev){

    if (ev&& evstopPropagation) {

        evstopPropagation()

    } else {

        event.cancelBubble = true

    }

}

• 事件绑定

obj.addEventListener 不兼容9+

obj.attachEvent 兼容ie6 7 8

解决方案：

function on(obj, type, fn){

    if(obj.addEventListener){  

        obj.addEventListener(type, fn, false)

    }else{

        obj.attachEvent('on'+type, fn)

    }

}

• 事件解除绑定

obj.removeEventListener 不兼容9+

obj.detachEvent 兼容ie6 7 8

解决方案：

function on(obj, type, fn){

    if(obj.removeEventListener){  

        obj.removeEventListener(type, fn, false)

    }else{

        obj.detachEvent('on'+type, fn)

    }

}

整理不易，如有遗漏还请多多包涵^_^