瀏覽器兼容性-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[i].className)) {//判斷els.className與reg是否匹配，若匹配返回true
13                 arr.push(els[i]);
　　　　　　　　　　　 reg.lastIndex = 0;　　　　　　　　　　　　　　　　　
14             }
15         }
16         return arr;//返回查找到的元素
17     }
18 }

補充，對於爲什麼要加上reg.lastIndex = 0;(13行下面那一句代碼)，緣由以下：

若不加這句代碼，有連續的兩個類名匹配時，只會匹配第一個，則第二個不會。究起緣由就是RegExp對象的lastIndex屬性：該屬性存放一個整數，它聲明的是上一次匹配文本以後的第一個字符的位置。若使用了‘g’全局修飾符，在執行了test方法後，lastIndex就會將匹配到的字符串的位置記錄下來做爲下一次匹配的起始位置。如果下一次匹配沒有成功，則lastIndex置爲0。

若不加'g'全局修飾符，則能夠把這句代碼省略掉。請點擊查看demo

小結：IE瀏覽器不支持getElementsByClassName()因此只能本身寫一個方法來獲取class

後續還會補充，有錯誤指出還請指出。