存在不同瀏覽器間的JS兼容總結

Benedict Evans 發布于2019-08-01 18:43 / 566人閱讀

摘要：年月日個人博客文章遷移到當我們在編寫用于處理事件時，由于考慮到不同瀏覽器間代碼兼容不同，代碼不易記憶于是做出如下整理。示例代碼如下阻止默認事件標準兼容小提示也能阻止默認事件但是要注意位置。

2016年2月19日個人博客文章--遷移到segmentfault

當我們在編寫JS用于處理事件時，由于考慮到不同瀏覽器間Js代碼兼容不同，代碼不易記憶,于是做出如下整理。（當然以后還會增加更新的。。。）

示例代碼如下:

(1)阻止默認事件

obj.onclick=function(ev){
        var event=ev||window.event;
        if(event.preventDefault){
            event.preventDefault();  /*W3C標準*/
        }else{
            event.returnValue=false;   /*兼容IE*/
        }
     }

小提示：return false; 也能阻止默認事件但是要注意位置。

（2）獲取下（上）一個兄弟節點

function nextnode(obj){  /*獲取下一個兄弟節點*/
        if (obj.nextElementSibling) {
            return obj.nextElementSibling;
        } else{
            return obj.nextSibling;
        }
    }
function prenode(obj){ /*獲取上一個兄弟節點*/
 
        if (obj.previousElementSibling) {
            return obj.previousElementSibling;
        } else{
            return obj.previousSibling;
        }
    }

(3)獲取第一個子（最后一個）節點

function firstnode(obj){/*獲取第一個子節點*/
        if (obj.firstElementChild) {
            return obj.firstElementChild;/*非IE678支持*/
        } else{
            return obj.firstChild;/*IE678支持*/
        }
    }
    function lastnode(obj){/*獲取最后一個子節點*/
        if (obj.lastElementChild) {
            return obj.lastElementChild;/*非IE678支持*/
        } else{
            return obj.lastChild;/*IE678支持*/
        }
    }

（4）添加（移除）事件監聽

function addEvent(obj,type,fn){ /*添加事件*/
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false); //非IE添加事件監聽
        }else{
            obj.attachEvent("on"+type,fn); //IE添加事件綁定
            stopEvent();
        }
    }
   function removeEvent(obj,type,fn){ //移除事件
        if(obj.removeEventListener){
            obj.removeEventListener(type,fn,false); //非IE移除事件,移除事件，第三個參數必須是函數名
        }else{
            obj.detachEvent("on"+type,fn); //IE移除事件
        }
    }

（5）舉例click事件阻止事件傳播

obj.onclick=function(ev){
            var event=ev||window.event;
            alert("aa");
            if(event.stopPropagation){
                event.stopPropagation(); //非IE阻止事件傳播
            }else{
                event.cancelBubble=true; //IE阻止事件傳播
            }
     }

（6）mouseover與mouseover的事件委托（經常用到，用于去除當鼠標浮動到元素容器中不同子元素間出現閃動問題。只需在函數function（ev）{} 頭部添加以下代碼即可）

// mouseover委托事件
    var event=ev||window.event;
    // var from=event.fromElement||event.relatedTarget;
    //在mouseover事件中from，表示鼠標來自哪個元素，也是事件委托類型，和target與srcElement相反
    // alert(from);
    var from=event.fromElement||event.relatedTarget;
    while(from){
        if (this==from) {
            return false;
        };
        from=from.parentNode;
    }
    //mouseout委托事件
    var event=ev||window.event;
        var to=event.toElement||event.relatedTarget;
        //在mouseout事件中to，表示鼠標指向那個元素，也是事件委托類型，和target與srcElement相反
        // alert(to)
        while(to){
            if (this==to) {
                return false;
            };
            to=to.parentNode;
        }

（7）滾輪事件

box.onmousewheel=function (ev){
     var event=ev||window.event;
     // box.innerHTML="鼠標滾動"+event.wheelDelta;
     if (event.wheelDelta>0) {
     alert("鼠標前滾");//非火狐 前滾120
     } else{
     alert("鼠標后滾")//非火狐 后滾-120
     };
     }*/
    box.addEventListener("DOMMouseScroll",function (ev){
     var event=ev||window.event;
     alert(event.detail);//火狐前滾：-3 ，后滾：3
     },false)//IE678不支持

8.js按需加載異步加載
demo.js如下

function test() {
    console.log("hello");
}

index.html如下

  function loadScript(url,callback){
        var script=document.createElement("script");
        script.type="text/javascript";
        if(script.readyState){ //ie
            script.onreadystatechange=function(){
                if(script.readyState=="complete"||script.readyState=="loaded"){
                    callback()
                }
            }
        }else{
            script.onload=function(){ //Safari chrome firefox opera ----Ie script不具備onload方法
                callback();
            }
        }
        script.src=url;  //寫在這里是為了防止onreadystatechange狀態不改變
        document.head.appendChild(script)
    }
    loadScript("demo.js",function(){test()})

云服務器 GPU云服務器 js兼容瀏覽器兼容 js瀏覽器兼容各種瀏覽器兼容js 不同服務器間的交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/52052.html

存在不同瀏覽器間的JS兼容總結

摘要：年月日個人博客文章遷移到當我們在編寫用于處理事件時，由于考慮到不同瀏覽器間代碼兼容不同，代碼不易記憶于是做出如下整理。示例代碼如下阻止默認事件標準兼容小提示也能阻止默認事件但是要注意位置。 2016年2月19日個人博客文章--遷移到segmentfault 當我們在編寫JS用于處理事件時，由于考慮到不同瀏覽器間Js代碼兼容不同，代碼不易記憶,于是做出如下整理。（當然以后還會增加更新的。...

shmily 2019-08-22 15:38 評論0 收藏0
一篇文章讓你學會如何選擇 JS HTTP 請求庫

摘要：本文將帶你了解不同請求的原理，以及如何為項目選擇合適的請求庫。小程序年微信小程序上線，隨后各大平臺都推出自己的小程序。下面為目前較火的請求庫。支持微信小程序和瀏覽器是一個基于的請求庫，可以用在微信小程序和瀏覽器中，對上述平臺都做了兼容。以前前端提到網絡請求通常是指瀏覽器，但現在隨著 Node.js、小程序的出現，網絡請求不再局限于瀏覽器。本文將帶你了解不同請求的原理，以及如何為項目選...

Render 2019-08-26 13:29 評論0 收藏0
前端跨域總結

摘要：通過跨域通過引入的不受同源策略的限制，所以我們可以通過標簽引入一個或者是一個其他后綴形式如，等的文件，此文件返回一個函數的調用。 1.跨域的定義只要協議、域名、端口有任何一個不同，就會被當做為不同的域，如果從A域名訪問B域名上的資源就叫做跨域。下面我們來看下幾種跨域的方法： 2.document.domain 瀏覽器的同源策略有一些限制，第一，不能通過ajax方法去請求不同源的資源...

Yang_River 2019-08-01 17:27 評論0 收藏0
前端跨域總結

摘要：通過跨域通過引入的不受同源策略的限制，所以我們可以通過標簽引入一個或者是一個其他后綴形式如，等的文件，此文件返回一個函數的調用。 1.跨域的定義只要協議、域名、端口有任何一個不同，就會被當做為不同的域，如果從A域名訪問B域名上的資源就叫做跨域。下面我們來看下幾種跨域的方法： 2.document.domain 瀏覽器的同源策略有一些限制，第一，不能通過ajax方法去請求不同源的資源...

honmaple 2019-08-20 18:52 評論0 收藏0
前端跨域總結

摘要：通過跨域通過引入的不受同源策略的限制，所以我們可以通過標簽引入一個或者是一個其他后綴形式如，等的文件，此文件返回一個函數的調用。 1.跨域的定義只要協議、域名、端口有任何一個不同，就會被當做為不同的域，如果從A域名訪問B域名上的資源就叫做跨域。下面我們來看下幾種跨域的方法： 2.document.domain 瀏覽器的同源策略有一些限制，第一，不能通過ajax方法去請求不同源的資源...

caiyongji 2019-07-25 15:02 評論0 收藏0