一些常见的原生js兼容写法

1、绑定事件和删除事件

/**
 *  添加绑定事件
 * @param elem 元素
 * @param type 事件类型
 * @param handler 事件处理函数
 */
const addEvent = (elem, type, handler) => {
    if (elem.addEventListener) {
        elem.addEventListener(type, handler, false);
    }else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function(e) {
            //IE中this默认指向window
            handler.call(elem, e);
        });
    }else {
        elem['on' + type] = handler;
    }
};
/**
 * 移除绑定事件
 * @param elem 元素
 * @param type 事件类型
 * @param handler 事件处理函数
 */
const removeEvent = (elem, type, handler) => {
    if (elem.addEventListener) {
        elem.removeEventListener(type, handler, false);
    }else if (elem.attachEvent) {
        elem.detachEvent('on' + type, function() {
            handler.call(elem);
        });
    }else {
        elem['on' + type] = null;
    }
}

2、获取pagex, pageY

**
 * 获取pagex, pageY
 * @param event
 * @returns {{pageX: (*|number), pageY: (*|number)}}
 */
function getPageXY(event) {
    let pageX ,pageY;
    pageX = event.pageX || (event.clientX + (window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft))
    pageY = event.pageY || (event.clientY + (window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop))
    return {pageX, pageY};
}

3、获取OffsetX，OffsetY

/**
 * 获取OffsetX，OffsetY
 * @param event
 * @returns {{offsetX: number, offsetY: number}}
 */
function getOffsetXY(event) {
    let elem = event.target || event.srcElement;
    return {
        offsetX: event.offsetX || (event.clientX - elem.getBoundingClientRect().left),
        offsetY: event.offsetY || (event.clientY - elem.getBoundingClientRect().top)
    }
}

4、获取计算样式width

/**
 * 获取计算样式
 * @param elem
 * @returns {number}
 */
function getStyleWidth(elem) {
    let styleObj =  window.getComputedStyle ? window.getComputedStyle(elem, null) : elem.currentStyle;
    return +styleObj.width.slice(0, -2);
}