js中的一些兼容性問題:
1
）獲取滾動高度：
document.documentElement.scrollTop||document.body.scrollTop
2
）獲取樣式兼容：
window.getComputedStyle(element)[styleName]:
支持
IE9
及以上版本
解決方法：
function getStyle(dom, styleName){
return dom.currentStyle ? dom.currentStyle[styleName] : getComputedStyle(dom)[styleName];
}
3
）事件對象兼容
window.event
只能在
IE
下運行，而不能在
Firefox
下運行
,
這是因為
Firefox
的
event
只能在事件發生的現場使用。
Firefox
必須從源處加入
event
作參數傳遞。
IE
忽略該參數，用
window.event
來讀取該
event
。
解決方法：
event = event || window.event;
4
）
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);
5
）
阻止事件冒泡兼容
stopPropagation()
和
cancelBubble
，前者是方法，是標准的寫法，后者是屬性，賦值
true
表示阻止，是
IE
的寫法。
解決方法：
判斷
stopPropagation是否存在，如果存在則用標准寫法否則則用IE的寫法，不可反過來判斷。
event.stopPropagation ? event.stopPropagation() : event.cancelBubble=true;
6
）阻止默認行為兼容
preventDefault()
和
returnValue()
前者標准寫法，后者
IE
寫法。
解決方法：
（常規方法）event.preventDefault?event.preventDefault():event.returnValue=false;
或者（非常規方法）直接在事件處理程序中return false;
7
）事件監聽兼容
標准瀏覽器的寫法
addEventListener()
和
IE
的寫法
attachEvent()
。
解決方法：
判斷
addEventListener是否存在，如果存在則用否則用IE8以下的版本（含IE8）的綁定方法attachEvent，removeEventListener()和detachEvent()也是一樣的用法。
if(document.all){
dom.attactEvent(“onclick”, fn);
} else {
dom.addEventListener(“click”, fn);
}
8）document.getElementByClassName()
：根據類名查找元素，返回集合（
IE9
及以上版本支持）
解決方法：
function getByClassName(className, context) {
context = context || document;
if (document.getElementsByClassName) // 瀏覽器支持使用 getElementsByClassName
return context.getElementsByClassName(className);
/* 不支持使用 getElementsByClassName */
// 保存查找到的元素的數組
var result = [];
// 查找 context 后代的所有元素
var allTags = context.getElementsByTagName("*");
// 遍歷所有的元素
for(var i = 0, len = allTags.length; i < len; i++) {
// 獲取當前遍歷元素使用的所有 class 類名
var classNames = allTags[i].className.split(" ");
// 遍歷當前元素的所有類名，和待查找的類名比較
for (var j = 0, l = classNames.length; j < l; j++) {
if (classNames[j] == className) { // 當前所在遍歷的元素是要查找出來的其中一個
result.push(allTags[i]);
break;
}
}
}
// 返回查找結果
return result;
}
9
）事件目標對象兼容
IE
下
,event
對象有
srcElement
屬性
,
但是沒有
target
屬性
;Firefox
下
,event
對象有
target
屬性
,
但是沒有
srcElement
屬性
解決方法：
var t = event.target || event.srcElement;
10)
獲取瀏覽器窗口大小的三種方法（瀏覽器的視口，不包括工具欄和滾動條）。
對於
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