javaScript中一些常见的兼容性问题以及解决方案

1）滚动条：

document.documentElement.scrollTop||document.body.scrollTop

2) 获取样式兼容

function getStyle(dom, styleName){

return dom.currentStyle?

dom.currentStyle[styleName] :getComputedStyle(dom)[styleName];}

3) 网页可视区域兼容

window.innerHeight || document.documentElement.clientHeight

window.innerWidth || document.documentElement.clientWidth

4） 事件对象兼容

e  = e || window.event;

这里函数传入的参数e，就是事件，浏览器会实时跟踪用户的行为。

如e.screenX、e.screenY、e.offsetX、e.offsetY…这种做法在FireFox、Chrome、Safari等遵循W3C规范的浏览器下是没有问题的。

唯独在IE下是行不通的， IE采用了一种非标准的方式，将事件作为window对象的event属性：window.event、window.event.screenX…

5） 阻止事件冒泡兼容

event.stopPropagation? event.stopPropagation():event.cancelBubble=true;

说明：前者是方法，是标准的写法，后者是属性，赋值true表示阻止，是IE的写法。

解决方法：判断stopPropagation是否存在，如果存在则用标准写法否则则用IE的写法，不可反过来判断。

6）阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

说明： preventDefault()和returnValue()前者标准写法，后者IE写法。

解决方法：一般情况建议直接使用return false阻止，但和取消默认事件的含义是不同的。

7）事件监听兼容

说明：标准浏览器的写法addEventListener()和IE的写法attachEvent()。

解决方法：判断addEventListener是否存在，如果存在则用否则用IE8以下的版本（含IE8）的绑定方法attachEvent，removeEventListener()和detachEvent()也是一样的用法。

8）事件目标对象兼容

var src = event.target || event.srcElement;

说明： IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性。 

解决方法：使用var src = event.target || event.srcElement;来代替IE下的event.srcElement或者Firefox下的event.target，请同时注意event的兼容性问题。

来源：千锋HTML5