浏览器兼容性-JS篇

总结一下平时遇到的浏览器兼容性问题，本篇关于JS。

1.事件绑定

兼容写法：

1 function add(obj,event){2     if (obj.addEventListener) {3         obj.addEventListener(event,fn,fase);4     }else{5         obj.attachEvent("on"+event,fn);6     }7 }

小结：addEventListener()兼容firefox、chrome、safari、opera、IE9+

　　　attachEvent()兼容IE7,8

2.event事件对象

兼容写法

1 document.onclick = function(e){2     var e = e||window.event;  3     console.log(e.clientX);4 }

小结：e兼容火狐浏览器，window.event兼容非火狐

3.获取scrollTop

兼容写法：

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

小结：document.documentElement.scrollTop兼容非chrome

        document.body.scrollTop兼容chrome

4.阻止浏览器默认事件

兼容写法：

1 function prevent(event){2     if (event.preventDefault) {3         event.preventDefault();4     }else{5         event.returnValue = false;6     }7 }

小结：eventPreventDefault()不兼容IE6-8

　　  event.returnValue = false;兼容IE

5.阻止冒泡

兼容写法：

1 function stop(event){2     if (event.stopPropagation) {3         event.stopPropagation();4     }else{5         event.cancleBubble = true;6     }7 }

小结：event.stopPropagation()不兼容IE6-8

　　  event.cancleBubble = true兼容IE

6.滚轮

兼容写法：

1 function mouseWheel(obj,fn){2     var ff = window.navigator.userAgent.indexOf('Firefox');3     if (ff!=-1) {  
　　　　　　obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐4     }else{5         obj.onmousewheel = wheel;//非火狐6     }7 }

小结：obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐

　　　 obj.onmousewheel = wheel;//非火狐

7.获取classname

　兼容写法：

 1 function byClass(parent,className){ 2     //通过className查找元素的兼容问题 3     //如果现代浏览器有这个写法 4     if (parent.getElementsByClassName) { 5         return parent.getElementsByClassName(className);//返回直接查找到的元素集 6     }else{ 7         //IE浏览器 8         var arr = [];//用于存储最终查找到的元素 9         var els = parent.getElementsByTagName('*');//获取查找范围下的所有元素10         var reg = new RegExp('\\b'+className+'\\b',g);11         for (var i=0;i<els.length;i++) {12             if (reg.test(els.className)) {//判断els.className与reg是否匹配，若匹配返回true13                 arr.push(els[i]);14             }15         }16         return arr;//返回查找到的元素17     }18 }