JS中的兼容处理

javaScript中一些常见的兼容性问题整理

1. 滚动条：

   document.documentElement.scrollTop||document.body.scrollTop

2. 网页可视区域兼容

   window.innerHeight || document.documentElement.clientHeight
   
   window.innerWidth || document.documentElement.clientWidth

3.获取样式兼容

   获取非行内样式（兼容问题）
        function getStyle(obj,attr){             //获取非行间样式，obj是对象，attr是值
               if(obj.currentStyle){                //针对ie获取非行间样式
                   return obj.currentStyle[attr];
               }else{
                   return getComputedStyle(obj,false)[attr];   //针对非ie
               };
           };

4. 事件对象兼容

    IE中：          window.event
       正常浏览器中：    对象.on事件 = function(event){}
   
       兼容方式：
       function fn(eve){
           var e = eve || window.event;
       }

5 阻止事件冒泡兼容

    eve.stopPropagation();            
    eve.cancelBubble = true;        //兼容IE` 

6.阻止默认事件兼容
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;**·

preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

       处理兼容方式
       if( e.preventDefault ){
           e.preventDefault();
       }else{
           window.event.returnValue = false;
       }
   
   return false

7.事件监听兼容

事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；

DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
元素.onclick = function(){}

DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

   oDiv.addEventListener('click',fn,false);
   oDiv.removeEventListener('click',fn ,false);

IE下：

只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）

     oDiv.attachEvent()；
       oDiv.detachEvent() ;

冒泡：从下往上（从里往外）
捕获：从上往下（从外往内）

兼容问题解决：

1.封装成对象的方式

   var EventUtil={
       addHandler:function(DOM,EventType,fn){
           if(DOM.addEventListener){
               DOM.addEventListener(EventType,fn,false);
           }else if(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)
           }else if(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);
           }else if(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);
       }else if(obj.detachEvent){
           obj.detachEvent("on" + inci,back);
       }else{
           obj["on"+inci] = null;
       }
   }

8.键盘事件兼容

    var eve = eve || window.event
    var keyC = eve.keyCode || eve.which

9.获取触发的事件源

   var target = e.target || e.srcElement;

以上是我自己总结的一些常遇见的JS兼容问题，希望可以帮助到大家。希望兼容问题早些被解决。