JavaScript常用的兼容语法

1.阻止事件冒泡

function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true; // 兼容IE
    }
}

2.阻止默认事件执行

if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}

3.获取事件对象

标签对象.事件类型 = function(e){
  e = e || window.event
}

4.获取非行内样式 (实际效果是获取标签执行的样式属性值)

if(window.getComputedStyle){
    console.log(window.getComputedStyle(oDiv).width);
}else{
    // 兼容IE的方法
    console.log(oDiv.currentStyle.width);    
}

5.获取浏览器滚动高度

var height = document.documentElement.scrollTop || document.body.scrollTop; // 兼容IE写法
  // 文档显示的宽/高 只能取值,不能赋值;   // (document.body.clientWidth/clientHeight)兼容低版本,存放在body里面;   // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

6.添加事件监听

function myAddEvent( ele , type , fun){
    // 判断 addEventListener这个方法是否存在
    if(ele.addEventListener){
        ele.addEventListener(type , fun);
    }else{
        ele.attachEvent('on'+type , fun);
    }
}

7.删除事件监听

function delFun(ele , type , fun){
    if(ele.removeEventListener){
        ele.removeEventListener(type , fun);
    }else{
        ele.detachEvent( 'on' + type , fun);
    }
}

8.getElementsByClassName(IE8以下兼容问题)

var allEles = document.all;
// var allEles = document.getElementsByTagName("*");
var list = [];
for (var i = 0; i <= allEles.length - 1; i++) {
        var ele = allEles[i];
        var className = ele.getAttribute("class");
        // console.log(className);
        if (className) {
            // list[list.length] = className;
            var classList = className.split(" ");// 生成包含所有class属性名的属性值的数组
            if (indexOf(classList, "first") != -1) {
                list.push(ele);
                // list[list.length] = ele;
            }
        }
    }
    console.log(list);

    // indexOf也不支持,需要封装
    function indexOf(list, item) {
        var index = -1;
        for (var i = 0; i <= list.length - 1; i++) {
            if (item === list[i]) {
                index = i;
                break;
            }
        }
        return index;
    }

 

9.建立ajax对象

let xhr = {};
if(XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

10.获取ajax响应体

xhr.onload = function(){}; // 常规浏览器
xhr.onreadystatechange = function(){};  // 低版本浏览器

 

上一篇:jQuery元素操作


下一篇:运动(move)的封装