JS中的一些兼容性问题
1、获取滚动高度
document.documentElement.scrollTop||document.body.scrollTop
2、获取样式兼容
window.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;
-
获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条)。
对于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