js兼容问题大多是在ie浏览器低版本以及ie浏览器和不同普通浏览器的差异
事件对象
document.onclick=function(ev){//谷歌火狐的写法,IE9以上支持,往下不支持;var e=ev;console.log(e);}document.onclick=function(){//谷歌和IE支持,火狐不支持;var e=event;console.log(e);}document.onclick=function(ev){//兼容写法;var e=ev||window.event;var mouseX=e.clientX;//鼠标X轴的坐标var mouseY=e.clientY;//鼠标Y轴的坐标}
DOM节点
//DOM节点相关,主要兼容IE 6 7 8function nextnode(obj){//获取下一个兄弟节点if (obj.nextElementSibling) {return obj.nextElementSibling;} else{return obj.nextSibling;};}function prenode(obj){//获取上一个兄弟节点if (obj.previousElementSibling) {return obj.previousElementSibling;} else{return obj.previousSibling;};}function firstnode(obj){//获取第一个子节点if (obj.firstElementChild) {return obj.firstElementChild;//非IE678支持} else{return obj.firstChild;//IE678支持};}function lastnode(obj){//获取最后一个子节点if (obj.lastElementChild) {return obj.lastElementChild;//非IE678支持} else{return obj.lastChild;//IE678支持};}
document.getElementsByClassName
//通过类名获取元素document.getElementsByClassName('');//IE 6 7 8不支持;//这里可以定义一个函数来解决兼容问题//第一个为全局获取类名,第二个为局部获取类名function byClass1(oClass){//全局获取,oClass为你想要查找的类名,没有“.”var tags=document.all?document.all:document.getElementsByTagName('*');var arr=[];for (var i = 0; i < tags.length; i++) {var reg=new RegExp('\\b'+oClass+'\\b','g');if (reg.test(tags[i].className)) {arr.push(tags[i]);};};return arr;//注意返回的也是数组,包含你传入的class所有元素;}function byClass2(parentID,oClass){//局部获取类名,parentID为你传入的父级IDvar parent=document.getElementById(parentID);var tags=parent.all?parent.all:parent.getElementsByTagName('*');var arr=[];for (var i = 0; i < tags.length; i++) {var reg=new RegExp('\\b'+oClass+'\\b','g');if (reg.test(tags[i].className)) {arr.push(tags[i]);};};return arr;//注意返回的也是数组,包含你传入的class所有元素;}
获取元素的非行间样式值
//获取元素的非行间样式值function getStyle(object,oCss) {if (object.currentStyle) {return object.currentStyle[oCss];//IE}else{return getComputedStyle(object,null)[oCss];//除了IE}}
设置监听事件
//设置监听事件function addEvent(obj,type,fn){//添加事件监听,三个参数分别为 对象、事件类型、事件处理函数,默认为falseif (obj.addEventListener) {obj.addEventListener(type,fn,false);//非IE} else{obj.attachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了};}function removeEvent(obj,type,fn){//删除事件监听if (obj.removeEventListener) {obj.removeEventListener(type,fn,false);//非IE} else{obj.detachEvent('on'+type,fn);//ie,这里已经加上on,传参的时候注意不要重复加了};}
元素到浏览器边缘的距离
//在这里加个元素到浏览器边缘的距离,很实用function offsetTL(obj){//获取元素内容距离浏览器边框的距离(含边框)var ofL=0,ofT=0;while(obj){ofL+=obj.offsetLeft+obj.clientLeft;ofT+=obj.offsetTop+obj.clientTop;obj=obj.offsetParent;}return{left:ofL,top:ofT};}
阻止事件传播
//js阻止事件传播,这里使用click事件为例document.onclick=function(e){var e=e||window.event;if (e.stopPropagation) {e.stopPropagation();//W3C标准}else{e.cancelBubble=true;//IE....}}
阻止默认事件
//js阻止默认事件document.onclick=function(e){var e=e||window.event;if (e.preventDefault) {e.preventDefault();//W3C标准}else{e.returnValue='false';//IE..}}
关于event事件中的target
//关于event事件中的targetdocument.onmouseover=function(e){var e=e||window.event;var Target=e.target||e.srcElement;//获取target的兼容写法,后面的为IEvar from=e.relatedTarget||e.formElement;//鼠标来的地方,同样后面的为IE...var to=e.relatedTarget||e.toElement;//鼠标去的地方}
鼠标滚轮滚动事件
//鼠标滚轮事件//火狐中的滚轮事件document.addEventListener("DOMMouseScroll",function(event){alert(event.detail);//若前滚的话为 -3,后滚的话为 3},false)//非火狐中的滚轮事件document.onmousewheel=function(event){alert(event.detail);//前滚:120,后滚:-120}
节点加载
//火狐下特有的节点加载事件,就是节点加载完才执行,和onload不同
//感觉用到的不多,直接把js代码放在页面结构后面一样能实现。。
document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加载完成。好像除IE6-8都可以.
键盘事件
//键盘检测兼容
function KeyC(eve){var e = eve || window.event;var keyc = e.keyCode || e.which;return keyc;
}
关于用 “索引” 获取字符串每一项出现的兼容性问题
var str="abcde";aletr(str[1]);//但是低版本的浏览器 IE6,7 不兼容//兼容方法:str.charAt (i) // 全部浏览器都兼容var str="abcde";for(var i=0;i<str.length;i++){alert (str.charAt (i)); // 放回字符串中的每一项}
窗口大小的兼容写法
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线)
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;// 网页内容实际宽高(包括工具栏和滚动条等边线)
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;// 网页内容实际宽高 (不包括工具栏和滚动条等边线)
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
创建ajax对象
var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft,XMLHTTP");