美文网首页
JS 兼容整理

JS 兼容整理

作者: 小碳儿 | 来源:发表于2020-06-24 13:49 被阅读0次

获取非行内样式的兼容方式

function getStyle(obj,attr){//获取非行间样式,obj是对象,attr是值if(obj.currentStyle){//针对ie获取非行间样式return obj.currentStyle[attr];

      }else{

          returngetComputedStyle(obj,false)[attr];//针对非ie        }

    }

获取事件对象的兼容方式

document.onclick=function(eve){

        vare=eve||window.event;

        console.log(e);

    }

事件冒泡的兼容方法

function stopBubble(e){

        if(e.stopPropagation){

            e.stopPropagation();

        }else{

            e.cancelBubble =true;//兼容ie        }

    }

阻止浏览器默认行为的兼容方法

if( e.preventDefault ){

        e.preventDefault();

    }else{

        window.event.returnValue =false;//ie}

监听事件的设置和移除的兼容方式

1.封装成对象的方式

    varEventUtil={

        addHandler:function(DOM,EventType,fn){

            if(DOM.addEventListener){

                DOM.addEventListener(EventType,fn,false);

            }elseif(DOM.attachEvent){

                DOM.attachEvent('on'+EventType,fn)

            }else{

                DOM['on'+EventType]=fn

            }

        },

        removeHandler:function(DOM,EventType,fn){

            if(DOM.removeEventListener){

                DOM.removeEventListener(EventType,fn,false)

            }elseif(DOM.detachEvent){

                DOM.detachEvent('on'+EventType,fn)

            }else{

                DOM['on'+EventType]=null;

            }

        }

    }2.封装成两个函数的方式

    function addEvent(obj,inci,back){

        if(obj.addEventListener){

            obj.addEventListener(inci,back);

        }elseif(obj.attachEvent){

            obj.attachEvent("on"+ inci,back);

        }else{

            obj["on"+inci] = back;

        }

    }

    function removeEvent(obj,inci,back){

        if(obj.removeEventListener){

            obj.removeEventListener(inci,back,false);

        }elseif(obj.detachEvent){

            obj.detachEvent("on"+ inci,back);

        }else{

            obj["on"+inci] =null;

        }

    }

事件委托的兼容方法

varoul = document.querySelector("ul")

    oul.onclick = function(eve){

        vare = eve || window.event;

        vart = e.target || e.srcElement;

        if(t.getAttribute("abc") =="l"){

            console.log(e.target.innerHTML)

        }

    }

键盘事件的兼容方法

vareve = eve||window.event;varkeyC = eve.keyCode||eve.which;

相关文章

  • JS 兼容整理

    获取非行内样式的兼容方式 function getStyle(obj,attr){//获取非行间样式,obj是对象...

  • JS事件兼容 - 列表整理

    事件兼容 备注: IE9及以上浏览器2种事件都支持,IE8及以下只支持IE浏览器列表的事件方法,所以要做浏览器兼容...

  • 兼容iOS 10 资料整理笔记

    兼容iOS 10 资料整理笔记 兼容iOS 10 资料整理笔记

  • 前端开发-浏览器兼容的坑

    前端开发-浏览器兼容的坑 最近开始整理前端开发的浏览器兼容问题,初次发版内容少一点,后续会持续更新内容~ 一、JS...

  • JS下载图片

    JS下载图片兼容IE

  • 文本溢出

    css单行 兼容性较好 css多行 兼容移动端和chrome js多行 可使用插件解决 Clamp.js

  • 兼容性问题

    CSS兼容性问题PC页面布局兼容JS兼容问题移动页面兼容问题 CSS兼容问题.header {_width:100...

  • 前端10

    浏览器前缀 -ms-兼容IE-moz-兼容firefox-o-兼容opera-webkit-兼容谷歌和苹果 JS ...

  • js数据类型和运算符

    浏览器前缀 -ms-兼容IE-moz-兼容firefox-o-兼容opera-webkit-兼容谷歌和苹果 JS ...

  • js兼容

    1.js获得焦点(onfocus)和失去焦点(onblur) (兼容性主要体现在chrome、firefox和ie...

网友评论

      本文标题:JS 兼容整理

      本文链接:https://www.haomeiwen.com/subject/teerfktx.html