兼容
1.事件绑定
addEventListener/removeEventListener 兼容IE9+及主流,ps:移除参数不能少
attachEvent/detachEvent 兼容IE + on
2.事件
function (e)
var e=e || window.event
3.滚轮事件,火狐与其他主流浏览器的上下滚动自然值也不同
document.onmousewheel 其他
document.addEventListener('DOMMouseScroll',fn,false) 火狐
4.键盘和鼠标事件
e.keyCode 键盘键值 兼容所有
e.which 鼠标值和键盘键值 不兼容IE8-
5.classList 不兼容IE8-
6.获取元素对象属性
getComputedStyle(oBox).width 不兼容IE678 扩展:获取不代表设置,区分oBox.style.width;
oBox.currentStyle.width 只兼容IE
7.下标
Arr[index] 不兼容IE8
charAt(index) 全兼容
8.鼠标位置
clientX
pageX 不兼容IE8- 扩展:clientX+scrollLeft兼容
9.绑定bind 不兼容IE678
10.查询设置文本内容
innerText 不兼容firefox
textContent 不兼容ie
11.getElementsByClassName
1 function getClass(param){ 2 if(document.getElementsByClassName){ 3 return document.getElementsByClassName(param); 4 }else{ 5 var all = document.getElementsByTagName('*'); 6 var arr = []; 7 for (var i = 0;i < all.length; i++){ 8 var className = all[i].className; 9 var arrClass = className.split(' '); 10 for ( var j = 0;j < arrClass.length; j++){ 11 if( arrClass[j] == param ){ 12 arr.push(all[i]); 13 } 14 } 15 } 16 return arr; 17 } 18 }
12.rem字体兼容IE78
1 html{ 2 font-size:62.5%; 3 } 4 p{ 5 font-size:15px;font-size:1.5rem; 6 }
13.css3媒体查询
不能兼容IE6-8,解决方法引用插件
14.判断排除IE
if (typeof winodw.screenX === 'number') {}
15.getComputedStyle 兼容
16.bind 兼容
if (!Function.prototype.bind) { Function.prototype.bind = function(oThis) { if (typeof this !== "function") { // closest thing possible to the ECMAScript 5 // internal IsCallable function throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable"); } var aArgs = Array.prototype.slice.call(arguments, 1), fToBind = this, // 此处的 this 指向目标函数 fNOP = function() {}, fBound = function() { return fToBind.apply(this instanceof fNOP ? this // 此处 this 为 调用 new obj() 时所生成的 obj 本身 : oThis || this, // 若 oThis 无效则将 fBound 绑定到 this // 将通过 bind 传递的参数和调用时传递的参数进行合并, 并作为最终的参数传递 aArgs.concat(Array.prototype.slice.call(arguments))); }; // 将目标函数的原型对象拷贝到新函数中,因为目标函数有可能被当作构造函数使用 fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; }; }
17.对象判断
function getDataType(obj) { if(obj === null){ return "null"; }else if(typeof obj === "object"){ if(obj instanceof Array){ return "array"; }else{ return "object"; } }else{ return typeof obj; } }
18.audio 兼容
https://mp.weixin.qq.com/s?__biz=MzUxMDYxNTgwMA==&mid=2247484212&idx=1&sn=561ecda7a649360239952fff0869fd75&chksm=f9010aa3ce7683b51da033148b6d98d76eefffb09a786cf62fef359f23fae221ff12b078fb6e&token=1735694303&lang=zh_CN#rd