JS兼容性问题总结——持续更新

JS兼容性问题总结

1、DOM获取子元素

问题描述: childNodes、firstChild、lastChild会获取包括文本节点在内的所有子节点，但是在IE8及以下的浏览器中，不会把文本节点算作子节点。

解决方案: 如果不需要文本节点，使用带Element的属性或方法获取对象。

2、获取元素的当前CSS样式

问题描述: currentStyle能读取元素正在显示的样式，但只能在IE中使用。在其他浏览器中，可以使用window.getComputedStyle()方法获取元素正在显示的样式。

currentStyle与getComputedStyle()的区别: currentStyle是属性，返回的是默认值，如：没有设置宽度，返回auto；
getComputedStyle是方法，返回的是真实值，如：没有设置宽度，返回显示的1260px。

解决方案

function getStyle(obj, name){
   return window.getComputedStyle ? 
   getComputedStyle(obj, null)[name] : obj.currentStyle[name]
}

3、获取事件对象

问题描述: 在IE8及以下的浏览器中，浏览器不会向事件响应函数传递事件对象，其事件对象封装在window中（window.event）

解决方案: 函数参数中的event和window中的event哪个存在用哪个

div.onclick = function (event) {
	var event = event || window.event
};

4、元素相对于页面的偏移量

问题描述: pageX和pageY分别是元素相对于文档页面左上角原点的水平和垂直偏移量，但由于其只能在IE中使用，想要获取元素相对于文档的偏移量，不得不另辟蹊径。clientX和clientY是元素相对于浏览器的偏移量，scrollLeft和scrollTop是滚动条滚动的距离，可以用clientX + scrollLeft（clientY + scrollTop）的方式来取代pageX和pageY。但是这里存在一个问题，火狐等浏览器的滚动条是相对于html，但chome等是相对于body的，所以需要对这部分做兼容。

解决方案: 谁有取谁

div.onmousemove = function(event){
    event = event || window.event

    // 获取鼠标的位置
    var mLeft = event.clientX
    var mTop = event.clientY

    // 获取滚动产生的偏移量
    var sLeft = document.body.scrollLeft || document.documentElement.scrollLeft
    var sTop = document.body.scrollTop || document.documentElement.scrollTop

    // 获取元素的宽高
    var divWidth = this.clientWidth
    var divHeight = this.clientHeight

    this.style.left = mLeft + sLeft - divWidth/2 +  'px'
    this.style.top = mTop + sTop - divHeight/2 +  'px'
}

5、绑定响应函数

问题描述: 在IE8及以下浏览器中，只能用attachEvent来绑定多个同类事件，但其他浏览器中没有attachEvent，只能用addEventListener来绑定事件。addEventListener的this是触发事件的元素，但attachEvent的this却是window

解决方案: 编写一个通用的bind函数，用于事件的绑定。

// 统一传不带on的事件名
function bind(obj, eventStr, callBack){
    // 判断是否有addEventListener方法，有执行第一步
    if(obj.addEventListener){
        obj.addEventListener(eventStr, callBack, false)
    }else{
        // 给事件名加on
        obj.attachEvent('on' + eventStr, function(){
            // 用obj来调回调函数，解决this是window的问题
            callBack.call(obj)
        })
    }
}

6、鼠标滚轮事件

问题描述 : nomousewheel是鼠标滚轮滚动的事件，但是在火狐中不支持该属性，在火狐中需要通过DOMMouseScroll来绑定滚轮事件，且只能通过事件绑定函数的方式来绑定。另外，在火狐中，判断滚轮方向用event.detail，下正上负。在其他浏览器中，用event.wheelDelta来判断方向，下负上正。

解决方案: 用两种方式绑定滚动事件，但用同一个方法。

box.onmousewheel = function(event){
   event = event || window.event
   
    if(event.wheelDelta < 0 || event.detail > 0)
    {
        alert('向下滚')
    }else{
        alert('向上滚')
    }
}
bind(box, 'DOMMouseScroll', box.onmousewheel)

7、取消浏览器默认行为

# 调用event的preventDefault()，并返回false
xxx.onxx = function(){
	event = event || window.event
	// 阻止键盘默认行为
	event.keyCode = 0
	
	// 阻止浏览器默认行为
	event.preventDefault && event.preventDefault()
	return false;
}