兼容问题总结

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

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

两个小知识点:
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
 
 
posted @ 2019-03-16 14:26  我是一名好程序员  阅读(187)  评论(0编辑  收藏  举报