工作中常见的浏览器兼容处理总结

1.获取事件对象
IE   window.event
FF   函数参数e
兼容处理：

1. function foo(e){
   
2.    var ev=e||window.event;
   
3.    return ev;
   
4. }

复制代码

2.all属性，该属性可以常用来判断浏览器

IE   document.all
FF   不支持
处理函数：

1. function foo(){
   
2.    if(document.all)
   
3.       alert("IE");
   
4.    else
   
5.       alert("FF");
   
6. }

复制代码

3.获取事件源对象，利用事件流简化编码
IE   ev.srcElement
FF   ev.target
兼容处理：

1. function foo(e){
   
2.     var ev=e||window.event;
   
3.     var obj=ev.srcElement||ev.target;
   
4.     return obj;
   
5. }

复制代码

4.JS获取元素CSS属性,obj.style.attribut只能获取写在dom中的样式，其他的样式获取不了，obj.style.attribute可以设置CSS属性
IE  obj.currentStyle.attribute
FF  window.getComputeStyle(obj,null).attribute
兼容处理：

1. function getStyle(obj,style){
   
2.     return window.getComputedStyle ? window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];
   
3. }

复制代码

5.获取滚动条距离顶部的高度，开发过程中我们经常需要获取这个值来配合交互过程，正常情况下我们都是用document.Element.scrollTop，但是chrome浏览器识别不了这个东西，这点比较奇葩，所以我们要用document.body.scrollTop去兼容，这两个值中肯定有一个会生效

1. function getScrollTop(){
   
2.      return  document.body.scrollTop||document.Element.scrollTop;
   
3. }

复制代码

6.某些时候，我们希望事件流不要发生，例如我们给内层元素和外层元素都添加了单击事件，可是我们希望当我们单击内层元素时，不要触发外层元素的单击事件，这个时候我们就要阻止事件流的发生，FF等浏览器支持的是stopPropagation()方法，IE支持的是cancelBubble = true属性

1. function stopEventFlow(event){
   
2.       var e=event||window.event;
   
3.      if(e.stopPropagation)｛
   
4.           return e.stopPropagation();
   
5.     ｝else{
   
6.           return e.cancelBubble = true;
   
7.     }
   
8. }

复制代码

7.获取对象下面的所有子节点，这个功能经常被我们用来动态的创建元素，可是IE和FF对于获取所有子节点的算法有细微的区别，IE会获取最后一个空白节点，而FF会把所有空白节点全部获取，空白节点对于我们的工作没有作用，所以我们需要利用兼容函数把空白节点去掉，同时保证IE与FF获取的节点数目还有内容是一样的

1. function getChild(obj){
   
2.      var arr=[];
   
3.      for(var i=0;i<obj.childNodes.length;i++){
   
4.          if(obj.childNodes[i].nodeType!=3){
   
5.               arr.push(obj.childNodes[i]);
   
6.           }
   
7.      }   
   
8.     return  arr;
   
9. }

复制代码

8.