兼容0)
事件对象兼容:
在IE8及以下识别对象window.event;IE8以上识别e或者eve;
改善兼容方法:
var e=eve||event;(方向调换后要写成window.event||eve)
兼容1)
鼠标点击事件对象返回值不一:
IE8以上:
左键 : 0
滚轮 : 1
右键 : 2
IE8及以下:
左键 :1
滚轮 :4
右键 : 2
改善兼容方法:
function getButton(eve){
if(eve){
return eve.button;
}else if(window.event){
var button = window.event.button;
switch(button){
case 1 :
return 0;
case 4 :
return 1;
case 2 :
return 2;
}
}
}
兼容2)
e.keyCode在火狐下的onkeypress事件下,所有的字符键返回的结果都是0;
用e.which可以改善,但是切换到IE8及以下,也出现返回结果不一致;
改善兼容方法:
var code=e.keyCode||e.which||e.charCode;
兼容3)
获取鼠标在元素上操作时的偏移量时:低版本的火狐无法使用e.offsetX和e.offsetY,需要使用e.layerX和e.layerY;
改善兼容的方法:
var x=e.offsetX||e.layerX;
var y=e.offsetY||e.layerY;
兼容4)
事件流下的/冒泡(从子元素到父元素全部执行)阻止冒泡时IE8及以下返回结果是undefined;
改善兼容方法:
function stopPropaG(e){
if(e.stopPropagation){
//说明是现代浏览器
e.stopPropagation();
}else{
//说明是ie8及以下浏览器
e.cancelBubble = true;
}
}
兼容5)跨浏览器兼容IE8以下阻止默认行为
兼容写法:
e.preventDefault? e.preventDefault():e.returnValue=false
兼容6)跨浏览器兼容IE8及以下的事件监听:
//此位置封装了一个函数addEvent;函数中传递了三个参数,元素,事件,回调函数,回调函数内执行的是事件监听
function addEvent(ele,eve,callBack){
if(ele.addEventListener){
ele.addEventListener(eve,callBack);
}else{
ele.attachEvent("on"+eve,callBack);
}
}
兼容7)事件委托在IE8及以下不兼容(显示undefined)
var target=e.target||e.srcElement;
兼容8)拖拽时去掉文字内容默认选中兼容
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
兼容9)获取浏览器可视宽高
IE8以下不识别
window.innerWidth:获取浏览器可视区的宽度
window.innerHeight:获取浏览器可视区的高度
兼容性好的写法:
document.documentElement.clientWidth;//兼容性好
document.documentElement.clientHeight;//兼容性好
兼容10)获取页面垂直方向滚走的距离时
低版本的火狐,谷歌不识别:
document.doucumentElement.scrollTop;
兼容写法:
document.decumentElement.scrollTop || document.body.scrollTop(低版本谷歌和火狐兼容)
兼容11) 跨浏览器兼容ie8及以下获取元素计算后样式值。
function getStyle(obj,attr){
return window.getComputedStyle ? window.getComputedStyle(obj,null)[attr] : obj.currentStyle[attr];
}
兼容12)兼容ie7的两像素问题。
function getRect(ele){
var rect = ele.getBoundingClientRect();
var a = document.documentElement.clientLeft;
return {
left :rect.left -a,
right:rect.right -a,
top:rect.top -a,
bottom:rect.bottom -a
}
}
兼容13)兼容ie8及以下缓存问题:
ie缓存:
每一交发送请求,如果请求路径没有发生任何改变,浏览器会认为与上一次请求是同一次请求。
上次请求在浏览器的缓存中保存了上次请求的记录,会在缓存中直接获取数据,而不会到接口中去获取数据。
如何解决缓存问题?
解决办法:让每一次请求与上一次请不同。
xhr.open("get","text.txt?rand="+Math.random());
xhr.open("get","text.txt?rand=" + new Date().getTime());
兼容14)兼容ie6及以下定义参数问题:
var xhr=new XMLHttpRequest()在ie6 及以下无此对象;
兼容写法:
function getXHR(){
var xhr=null;
if(Window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = ActiveXObject("Microsoft.XMLHTTP");
}
return xhr
}