如何处理兼容问题
- 如果两个都是属性，用逻辑||做兼容
- 如果有一个是方法，用三元做兼容
- 如果是多个属性或方法，封装函数做兼容
两个小知识点：
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