JS兼容性

1.获取样式

function getStyle(obj,sName){

  return (obj.currentStyle || getComputedStyle(obj,false))[sName]

}

2.获取元素

 obj.previousElementSibling || obj.previousSibling

obj.nextElementSibling || obj.nextSibling

3.获取向上滚动的距离

document.body.scrollLeft || document.documentElement.scrollLeft

4.兼容事件对象

var oEvent = evt || event;

5.DOM事件的封装和兼容

// 事件的绑定

function addEvent (obj,type,fn){

   if(obj.addEventListener){

      obj.addEventListener(type,fn,false);

    }else{

       obj.attachEvent('on'+type , fn);

   }

}

// 事件的移除

function removeEvent(obj,type,fn){

    if(obj.removeEventListener){

      obj.removeEventListener(type,fn,false);

    }else{

      obj.detachEvent('on'+type , fn);

   }

}

6.阻止默认事件

  oEvent.preventDefault && oEvent.preventDefault();

7.ready的封装兼容

function addReady (fn){

    if(document.addEventListener){

        document.addEventListener('DOMContentLoaded',fn,false);

     }else{

        document.attachEvent('onreadystatechange',function(){

            if(document.readyState == 'complete'){

                 fn();

           }

      });

   }

}

8.滚轮事件的封装兼容和使用

//使用

 addWheel(obj,function(bDown){

     if(bDown){

       alert('向下')

    }else{

         alert('向上')

    }

})

//封装

function addWheel(obj,fn){

//加事件

if(navigator.userAgent.toLowerCase().indexOf('Firefox') != -1){

obj.addEventListener('DOMMouseScroll',show,false)

}else{

obj.onmousewheel = show;

}

//执行事件

function show (ev){

var bDown = true;

// 确定到底是向上还向下,更改bDown的真假

var oEvent = ev || event;

if(oEvent.detail){

if(oEvent.detail>0){

bDown = true;

}else{

bDown = false;

}

}else{

if(oEvent.wheelDelta>0){

bDown = false;

}else{

bDown = true

}

}

fn(bDown);

}

}

9.事件委托兼容

var  oLi = oEvent.srcElement || oEvent.target;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,103评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • 1.触屏事件 2.cookie 本地存储 3.jsonp 1.hammer.js 2.swiper.js js兼容...
    3hours阅读 912评论 0 2
  • 众所周知,做程序最讨厌的就是解决兼容问题,你懂得,。目前就想到这些,后期想起来或者是遇到会继续统计。有错误也请大家...
    虚幻的锈色阅读 875评论 0 10
  • 面向对象编程 1.创建,使用函数 var CheckObject = {checkName : function(...
    依米花1993阅读 402评论 0 0