存在 top das opera 必須 scrolltop 及其 邏輯運算 定義

如何處理兼容問題

• 如果兩個都是屬性，用邏輯||做兼容
• 如果有一個是方法，用三元做兼容
• 如果是多個屬性或方法，封裝函數做兼容

---

兩個小知識點： 1、取消拖拽的默認行為： document.ondragstart = function(){ 　　return false } 2、阻止右鍵菜單的默認行為： document.oncontextmenu = function(){ 　　return false }

---

兼容問題： 一、運用邏輯運算符||做的相關兼容 1、關於獲取滾動高度的不兼容問題 IE,Chrome: document.body.scrollTop FF: document.documentElement.scrollTop 兼容寫法： var scrollTop = document.documentElement.scrollTop||document.body.scrollTop 2、關於獲取事件對象的兼容： 在ie中事件對象定義為window.event， 高版本瀏覽器必須給函數加入e作參數傳遞。IE忽略該參數，用window.event來讀取該event。 function (e){ 　　var e = e || window.event } 3、獲取鍵盤編碼的兼容： IE8 及其更早版本不支持 which 屬性。不支持的瀏覽器可使用 keyCode 屬性。 但是， keyCode 屬性在 Firefox 瀏覽器的 onkeypress 事件中是無效的。 var x = event.which || event.keyCode; 4、關於事件委托獲取事件源的兼容問題： IE下,event對象有srcElement屬性,但是沒有target屬性; 在高版本瀏覽器下,event對象有target屬性,但是沒有srcElement屬性 function (e){ 　　var e = e || window.event 　　var target = e.target || e.srcElement } 二、運用三元表達式做的兼容 5、阻止事件冒泡的兼容 stopPropagation()是方法，是標準的寫法； cancelBubble是屬性，賦值true表示阻止，是IE的寫法。 function (e){ 　　var e = e || window.event 　　e.stopPropagation ? e.stopPropagation : e.cancleBubble = true; } 6、阻止瀏覽器的默認行為： preventDefault()是標準寫法， returnValue()是IE寫法 oA.onclick = function (eve){ 　　var e = eve || window.event 　　e.preventDefault ? e.preventDefault() : e.returnValue = false } 三、運用方法進行兼容的問題： 7、添加事件監聽： 判斷addEventListener是否存在，如果存在則用否則用IE8以下的版本（含IE8）的綁定方法attachEvent，removeEventListener()和detachEvent()也是一樣的用法。 function addEventListener(obj,type,callback,capture){ if(obj.addEventListener){ obj.addEventListener(type,callback,capture); //標準瀏覽器 }else{ 　　　　obj.attachEvent("on" + type,callback); //IE 　　} }

參數	說明
type	事件類型 IE：事件需要添加‘on‘前綴，如on+事件 W3C：事件不需要添加‘on‘前綴，如事件
callback	事件的處理程序，通常是一個匿名函數
capture	瀏覽器模型，true（捕獲模型），false（冒泡模型），默認IE8以下瀏覽器只支持冒泡模型，所以其值默認為false。

IE內核與W3C內核事件監聽區別

1. 綁定語法不同 IE：attachEvent W3C：addEventListener 2. type參數不同 IE：事件需要添加‘on‘前綴，如on+事件 W3C：事件不需要添加‘on‘前綴，如事件 3. 參數數量不同 IE：2個參數，type、callback W3C：3個參數，type、callback、capture（瀏覽器模型） 4. 觸發順序不同 IE：倒序觸發，先綁定後觸發 W3C：正序觸發，先綁定先觸發 移除事件監聽： 特別說明：如果一個對象向進行事件移除，那麽其綁定事件監聽時事件處理程序必須是有名函數，否則是無法進行移除 function removeEventListener(obj,type,callback){ if(obj.removeEventListener){ 　　　　obj.removeEventListener(type,callback); }else{ 　　　　obj.detachEvent(type,callback); // IE 　　} } 8、獲取鼠標鍵值的兼容：（event.button） function getbutton（e）{ 　　var e = e || window.event; 　　if(e){ //判斷是否為標準瀏覽器 　 　return e.button }else if(window.event){ //判斷是不是IE switch(e.button){ case 1 : return 0; case 4 : return 1; case 2 : return 2; } } } 9、關於使用getAttribute獲取className不兼容的問題 function fn(obj){ if(obj.getAttribute("class"))==null{ return obj.getAttribute("className"); //標準瀏覽器不支持,ie7支持 }else{ 　return obj.getAttribute("class"); //標準瀏覽器支持，ie7不支持 } } 10、關於getElementsByClassName("class屬性名稱")的不兼容問題； function fn(obj.class屬性名稱){ if(obj.getElementsByClassName){ return obj.getElementsByClassName(className); //標準瀏覽器支持，ie8以下不支持 }else{ var list = []; var arr = obj.getElementsByTagName(*) //上一步是獲取頁面所有的標簽元素 for(var i = 0;i < arr.length;i ++){ //遍歷所有元素，找出class名為指定名字的元素 if(arr[i].className == className){ list.push(arr[i]); } } return list; } } 11、獲取非行內樣式的兼容寫法 function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr]; } 12、event.pageX和event.pageY event.pageX和event.pageY：獲取鼠標相對於整個文檔的水平及垂直坐標，但IE9之前的版本不支持 event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft); event.clientY+(document.documentElement.scrollTop||document.body.scrollTop); 13、獲取瀏覽器窗口大小的三種方法（瀏覽器的視口，不包括工具欄和滾動條）。 對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari： 　　window.innerHeight – 瀏覽器窗口的內部高度 　　window.innerWidth – 瀏覽器窗口的內部寬度 對於 Internet Explorer 8、7、6、5： 　document.documentElement.clientHeight 　　document.documentElement.clientWidth 　　或者 　　document.body.clientHeight 　　document.body.clientWidth 　　window.innerHeight || document.documentElement.clientHeight 　　window.innerWidth || document.documentElement.clientWidth

兼容問題總結