总结一下平时遇到的浏览器兼容性问题,本篇关于JS。
1.事件绑定
兼容写法:
1 function add(obj,event){
2 if (obj.addEventListener) {
3 obj.addEventListener(event,fn,fase);
4 }else{
5 obj.attachEvent("on"+event,fn);
6 }
7 }
小结:addEventListener()兼容firefox、chrome、safari、opera、IE9+
attachEvent()兼容IE7,8
2.event事件对象
兼容写法
1 document.onclick = function(e){
2 var e = e||window.event;
3 console.log(e.clientX);
4 }
小结:e兼容火狐浏览器,window.event兼容非火狐
3.获取scrollTop
兼容写法:
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
小结:document.documentElement.scrollTop兼容非chrome
document.body.scrollTop兼容chrome
4.阻止浏览器默认事件
兼容写法:
1 function prevent(event){
2 if (event.preventDefault) {
3 event.preventDefault();
4 }else{
5 event.returnValue = false;
6 }
7 }
小结:eventPreventDefault()不兼容IE6-8
event.returnValue = false;兼容IE
5.阻止冒泡
兼容写法:
1 function stop(event){
2 if (event.stopPropagation) {
3 event.stopPropagation();
4 }else{
5 event.cancleBubble = true;
6 }
7 }
小结:event.stopPropagation()不兼容IE6-8
event.cancleBubble = true兼容IE
6.滚轮
兼容写法:
1 function mouseWheel(obj,fn){
2 var ff = window.navigator.userAgent.indexOf('Firefox');
3 if (ff!=-1) {
obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
4 }else{
5 obj.onmousewheel = wheel;//非火狐
6 }
7 }
小结:obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
obj.onmousewheel = wheel;//非火狐
7.获取classname
兼容写法:
1 function byClass(parent,className){
2 //通过className查找元素的兼容问题
3 //如果现代浏览器有这个写法
4 if (parent.getElementsByClassName) {
5 return parent.getElementsByClassName(className);//返回直接查找到的元素集
6 }else{
7 //IE浏览器
8 var arr = [];//用于存储最终查找到的元素
9 var els = parent.getElementsByTagName('*');//获取查找范围下的所有元素
10 var reg = new RegExp('\\b'+className+'\\b','g');
11 for (var i=0;i<els.length;i++) {
12 if (reg.test(els[i].className)) {//判断els.className与reg是否匹配,若匹配返回true
13 arr.push(els[i]);
reg.lastIndex = 0;
14 }
15 }
16 return arr;//返回查找到的元素
17 }
18 }
补充,对于为何要加上reg.lastIndex = 0;(13行下面那一句代码),原因如下:
若不加这句代码,有连续的两个类名匹配时,只会匹配第一个,则第二个不会。究起原因就是RegExp对象的lastIndex属性:该属性存放一个整数,它声明的是上一次匹配文本之后的第一个字符的位置。若使用了‘g’全局修饰符,在执行了test方法后,lastIndex就会将匹配到的字符串的位置记录下来作为下一次匹配的起始位置。若是下一次匹配没有成功,则lastIndex置为0。
小结:IE浏览器不支持getElementsByClassName()所以只能自己写一个方法来获取class
后续还会补充,有错误指出还请指出。