推荐答案

　　常见的兼容问题有哪些 ?

　　获取标签节点：

　　document.getElementsByClassName('类名')在低版本ie中不兼容。解决方法是使用其他方式获取：

　　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;

　　}