安排~~炒鸡全的JS兼容问题，码上-----【XUEBIG】

如何处理兼容问题

• 如果两个都是属性，用逻辑||做兼容
• 如果有一个是方法，用三元做兼容
• 如果是多个属性或方法，封装函数做兼容

---

两个小知识点：

1、取消拖拽的默认行为：

document.ondragstart = function(){

　　return false

}

2、阻止右键菜单的默认行为：

document.oncontextmenu = function(){

　　return false

}

---

 

兼容问题：

一、运用逻辑运算符||做的相关兼容

1、关于获取滚动高度的不兼容问题

 IE,Chrome: document.body.scrollTop

 FF: document.documentElement.scrollTop

兼容写法：

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

 

2、关于获取事件对象的兼容：

在ie中事件对象定义为window.event，

高版本浏览器必须给函数加入e作参数传递。IE忽略该参数，用window.event来读取该event。

function (e){

　　var e = e || window.event

}

 

3、获取键盘编码的兼容：

IE8 及其更早版本不支持 which 属性。不支持的浏览器可使用 keyCode 属性。

但是， keyCode 属性在 Firefox 浏览器的 onkeypress 事件中是无效的。

var x = event.which || event.keyCode;

 

4、关于事件委托获取事件源的兼容问题：

IE下,event对象有srcElement属性,但是没有target属性;

在高版本浏览器下,event对象有target属性,但是没有srcElement属性

function (e){

　　var e = e || window.event

　　var target = e.target || e.srcElement

}

 

二、运用三元表达式做的兼容

5、阻止事件冒泡的兼容

stopPropagation()是方法，是标准的写法；

cancelBubble是属性，赋值true表示阻止，是IE的写法。

function (e){

　　var e = e || window.event

　　e.stopPropagation ? e.stopPropagation : e.cancleBubble = true;

}

 

6、阻止浏览器的默认行为：

preventDefault()是标准写法，

returnValue()是IE写法

oA.onclick = function (eve){

　　var e = eve || window.event

　　e.preventDefault ? e.preventDefault() : e.returnValue = false

}

 

三、运用方法进行兼容的问题：

7、添加事件监听：

判断addEventListener是否存在，如果存在则用否则用IE8以下的版本（含IE8）的绑定方法attachEvent，removeEventListener()和detachEvent()也是一样的用法。

function addEventListener(obj,type,callback,capture){

    if(obj.addEventListener){

              obj.addEventListener(type,callback,capture);  //标准浏览器

     }else{

　　　　obj.attachEvent("on" + type,callback);  //IE

　　}

}

参数	说明
type	事件类型 IE：事件需要添加'on'前缀，如on+事件 W3C：事件不需要添加'on'前缀，如事件
callback	事件的处理程序，通常是一个匿名函数
capture	浏览器模型，true（捕获模型），false（冒泡模型），默认IE8以下浏览器只支持冒泡模型，所以其值默认为false。

 

 

IE内核与W3C内核事件监听区别

1. 绑定语法不同

IE：attachEvent

W3C：addEventListener

2. type参数不同

IE：事件需要添加'on'前缀，如on+事件

W3C：事件不需要添加'on'前缀，如事件

3. 参数数量不同

IE：2个参数，type、callback

W3C：3个参数，type、callback、capture（浏览器模型）

4. 触发顺序不同

IE：倒序触发，先绑定后触发

W3C：正序触发，先绑定先触发

移除事件监听：

特别说明：如果一个对象向进行事件移除，那么其绑定事件监听时事件处理程序必须是有名函数，否则是无法进行移除

function removeEventListener(obj,type,callback){

   if(obj.removeEventListener){

　　　　obj.removeEventListener(type,callback);

   }else{

　　　　obj.detachEvent(type,callback); // IE

　　}

}

 

8、获取鼠标键值的兼容：（event.button）

function getbutton（e）{

　　var e = e || window.event;

　　if(e){     //判断是否为标准浏览器

　        　return e.button

        }else if(window.event){  //判断是不是IE

                switch(e.button){

                      case 1 :  return 0;

                      case 4 :  return 1;

                      case 2 :  return 2;

                }

        }

}

 

9、关于使用getAttribute获取className不兼容的问题

function fn(obj){

      if(obj.getAttribute("class"))==null{

              return obj.getAttribute("className");  //标准浏览器不支持,ie7支持

      }else{

         　return obj.getAttribute("class");  //标准浏览器支持，ie7不支持

        }

}

 

10、关于getElementsByClassName("class属性名称")的不兼容问题；

function fn(obj.class属性名称){

       if(obj.getElementsByClassName){

                  return   obj.getElementsByClassName(className);  //标准浏览器支持，ie8以下不支持

      }else{

                 var list = [];

                 var arr = obj.getElementsByTagName(*)   //上一步是获取页面所有的标签元素

                 for(var i = 0;i < arr.length;i ++){   //遍历所有元素，找出class名为指定名字的元素

                              if(arr[i].className == className){

                              list.push(arr[i]);

                              }

                 }

                  return list;

        }

}

 

 11、获取非行内样式的兼容写法

function getStyle(obj,attr){

        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];

}

 

12、event.pageX和event.pageY

event.pageX和event.pageY：获取鼠标相对于整个文档的水平及垂直坐标，但IE9之前的版本不支持

event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);

event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);

 

13、获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

　　window.innerHeight – 浏览器窗口的内部高度

　　window.innerWidth – 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

    　document.documentElement.clientHeight

　　document.documentElement.clientWidth

　　或者

　　document.body.clientHeight

　　document.body.clientWidth

　　window.innerHeight || document.documentElement.clientHeight

　　window.innerWidth || document.documentElement.clientWidth