js中常见的一些兼容性问题,面试必备

总结一下平时遇到的浏览器兼容性问题,本篇关于JS。

1. 事件绑定

兼容写法:

function add(obj,event){
    if (obj.addEventListener) {
        obj.addEventListener(event,fn,fase);
    }else{
        obj.attachEvent("on"+event,fn);
    }
}

小结:

addEventListener() 兼容:firefox、chrome、safari、opera、IE9+;

attachEvent() 兼容:IE7,8 。

2. event事件对象

兼容写法:

document.onclick = function(e){
    var e = e||window.event;  
    console.log(e.clientX);
}

小结:

e 兼容火狐浏览器,window.event 兼容非火狐。

3. 获取 scrollTop

兼容写法:

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

小结:

document.documentElement.scrollTop 兼容非 chrome;

document.body.scrollTop 兼容 chrome。

4. 阻止浏览器默认事件

兼容写法:

function prevent(event){
    if (event.preventDefault) {
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

小结:

eventPreventDefault() 不兼容 IE6-8;

event.returnValue = false; 兼容IE。

5. 阻止冒泡

兼容写法:

function stop(event){
    if (event.stopPropagation) {
        event.stopPropagation();
    }else{
        event.cancleBubble = true;
    }
}

小结:

event.stopPropagation() 不兼容 IE6-8;

event.cancleBubble = true 兼容IE。

6. 滚轮

兼容写法:

function mouseWheel(obj,fn){
    var ff = window.navigator.userAgent.indexOf('Firefox');
    if (ff!=-1) {  
        obj.addEventListener('DOMMouseScroll',wheel,false);//兼容火狐
    }else{
        obj.onmousewheel = wheel;//非火狐
    }
}

小结:

obj.addEventListener('DOMMouseScroll',wheel,false); 兼容火狐;

obj.onmousewheel = wheel; 非火狐。

7. 获取className

兼容写法:

function byClass(parent,className){
    //通过className查找元素的兼容问题
    //如果现代浏览器有这个写法
    if (parent.getElementsByClassName) {
        return parent.getElementsByClassName(className);//返回直接查找到的元素集
    }else{
        //IE浏览器
        var arr = [];//用于存储最终查找到的元素
        var els = parent.getElementsByTagName('*');//获取查找范围下的所有元素
        var reg = new RegExp('\\b'+className+'\\b','g');
        for (var i=0;i<els.length;i++) {
            if (reg.test(els[i].className)) {//判断els.className与reg是否匹配,若匹配返回true
                arr.push(els[i]);
            reg.lastIndex = 0;                 
            }
        }
        return arr;//返回查找到的元素
    }
}

补充,对于为何要加上 reg.lastIndex = 0; (13行下面那一句代码),原因如下:

若不加这句代码,有连续的两个类名匹配时,只会匹配第一个,则第二个不会。

究起原因就是 RegExp 对象的 lastIndex 属性:该属性存放一个整数,它声明的是上一次匹配文本之后的第一个字符的位置。

若使用了‘g’全局修饰符,在执行了 test 方法后,lastIndex 就会将匹配到的字符串的位置记录下来作为下一次匹配的起始位置。

若是下一次匹配没有成功,则 lastIndex 置为 0。

若不加'g'全局修饰符,则可以把这句代码省略掉。请点击查看demo

小结:IE浏览器不支持 getElementsByClassName() 所以只能自己写一个方法来获取 class;

后续还会补充,有错误指出还请指出。


作者:daicunya

原文链接:HelloWeb前端网 » js中常见的一些兼容性问题,面试必备 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享