推薦答案

　　常見的兼容問題有哪些 ?

　　獲取標簽節點：

　　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;

　　}