兼容问题总结

获取标签

问题

document.getElementsByClassName('类名')

在低版本e中不兼容。

解决

document.getElementById('id名')
document.getElementsByTagName('标签名')
document.getElementsByName('name属性值')
document.querySelector('css选择器')
document.querySelectorAll('css选择器')

卷去的高度

问题

// 当有文档声明的时候
document.documentElement.scrollTop
document.documentElement.srollLeft
// 没有文档声明的时候
document.body.scrollTop
document.body.scrollLeft

解决

// 获取
var t = document.documentElement.scrollTop || document.body.scrollTop
var l = document.documentElement.srollLeft || document.body.scrollLeft
// 设置
document.documentElement.scrollTop = document.body.scrollTop = 数值
document.documentElement.srollLeft = document.body.scrollLeft = 数值

获取样式

问题

// W3C标准浏览器
window.getComputedStyle(元素)
// 低版本IE中
元素.currentStyle

解决

function getStyle(ele,attr){
    if(window.getComputedStyle){
       return getComputedStyle(ele)[attr]
    }else{
        return ele.currentStyle[attr]
    }
}

事件绑定

问题

// W3C浏览器
ele.addEventListener(事件类型,函数)
// 低版本Ie
ele.attachEvent('on事件类型',函数)

解决

function bindEvent(ele,type,handler){
    if(ele.addEventListener){
        ele.addEventListener(type,handler)
    }else if(ele.attachEvent){
        ele.attachEvent('on'+type,handler)
    }else{
        ele['on'+type] = handler
    }
}

事件解绑

问题

// W3C浏览器
ele.removeEventListener(事件类型,函数)
// 低版本Ie
ele.detachEvent('on事件类型',函数)

解决

function unBind(ele,type,handler){
    if(ele.removeEventListener){
        ele.removeEventListener(type,handler)
    }else if(ele.detachEvent){
        ele.detachEvent('on'+type,handler)
    }else{
        ele['on'+type] = null
    }
}

获取事件对象

问题

// W3C浏览器
元素.on事件类型 = function(e){}
元素.addEventListener(事件类型,fn)
function fn(e){
    
}
// 在低版本IE中
元素.on事件类型 = function(){ window.event }
元素.addEventListener(事件类型,fn)
function fn(){
    window.event
}

解决

元素.on事件类型 = function(e){
    var e = e || window.event
}
元素.addEventListener(事件类型,fn)
function fn(e){
    var e = e || window.event
}

阻止默认行为

问题

// W3C浏览器
元素.on事件类型 = function(e){
    e.preventDefault()
}
// 在低版本IE中
元素.on事件类型 = function(){ window.event.returnValue = false }

解决

元素.on事件类型 = function(e){
    var e = e || window.event
    e.preventDefault?e.preventDefault():e.returnValue=false
}

阻止事件冒泡

问题

// W3C浏览器
元素.on事件类型 = function(e){
    e.stopPropagation()
}
// 在低版本IE中
元素.on事件类型 = function(){ window.event.cancelBubble = true }

解决

元素.on事件类型 = function(e){
    var e = e || window.event
    e.stopPropagation?e.stopPropagation():e.cancelBubble=true
}

获取精准的目标元素

问题

// W3C浏览器
元素.on事件类型 = function(e){
    e.target
}
// 在低版本IE中
元素.on事件类型 = function(){ window.event.srcElement }

解决

元素.on事件类型 = function(e){
    var e = e || window.event
    var target = e.target || e.srcElement;
}

获取键盘码

问题

// W3C浏览器
元素.on事件类型 = function(e){
    e.keyCode
}
// 在低版本火狐中
元素.on事件类型 = function(e){
    e.which
}

解决

元素.on事件类型 = function(e){
    var e = e || window.event
    var keycode = e.keyCode || e.which;
}