存在不同浏览器间的JS兼容总结

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了存在不同浏览器间的JS兼容总结相关的知识,希望对你有一定的参考价值。

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()})

以上是关于存在不同浏览器间的JS兼容总结的主要内容,如果未能解决你的问题,请参考以下文章

不同浏览器间的应用兼容性

javascript高级程序设计 1 ~ 3 章 部分知识点总结

浏览器兼容性问题解决方案 · 总结

兼容性问题

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升