js中的一些兼容性问题

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