码迷,mamicode.com
首页 > Web开发 > 详细

js的一些兼容融性问题

时间:2019-11-02 16:01:09      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:function   def   距离   鼠标   request   滚动条   mic   als   turn   

   1.非行内样式获取

    高级浏览器

   getComputedStyle(obox.false)//获取所有属性

    ie浏览器

  box.currentStyle//获取所有属性

    兼容写法

  function getStyle(ele,attr){//ele为获取元素,attr为属性。
       var a = "";
       if(ele.currentStyle){
           a = ele.currentStyle[attr];
       }else{
          a = getComputedStyle(ele,false)[attr];
       }
           return a;
       }

  2.事件冒泡的兼容

  高级浏览器

  e.stopPropagation()

  ie浏览器

  e.cancelBubble = true;

  兼容写法

   function stopBubble(e){
        if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.cancelBubble = true;
        }
    }

  3.阻止默认事件

  高级浏览器

 e.preventDefault()

  ie浏览器

 e.returnValue = false

  兼容写法

  function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault()
        }else{
            e.returnValue = false;  
        }
   }

  4.DOM2级绑定事件

  高级浏览器

  obox.addEventListener("click",fn)

  ie浏览器

  obox.attachEvent("onclick",fn)

  兼容写法和删除兼容

//绑定兼容写法
addEvent(obox,"click",fn1)
     function fn1(){
         console.log(1)
     }
    function addEvent(ele,type,cb){
        if(ele.addEventListener){
            ele.addEventListener(type,cb)
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,cb)
        }else{
            ele["on"+type] = cb;
        }

    }

//删除的兼容 removeEvent(obox,"click",fn1) function removeEvent(ele,type,cb){ if(ele.removeEventListener){ ele.removeEventListener(type,cb) }else if(ele.detachEvent){ ele.detachEvent("on"+type,cb) } else{ele["on"+type] = null; } }

 6.ajax的兼容

  var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");

 7.获取滚动条距离

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

 8.鼠标编码的兼容

function getButton(evt){
    var e = evt || window.event;
    if(evt){
        return e.button;
    }else if(window.event){
        switch(e.button){
            case 1 : return 0;
            case 4 : return 1;
            case 2 : return 2;
        }
    }
}

 9.获取键盘编码的兼容

evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;

 

  

js的一些兼容融性问题

标签:function   def   距离   鼠标   request   滚动条   mic   als   turn   

原文地址:https://www.cnblogs.com/fuxiaoyon/p/11782258.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!