原生js的兼容问题总结

时间:2023-03-09 21:33:46
原生js的兼容问题总结

获取元素的非行间样式

function getStyle(obj, name) { //获取元素的非行间样式
    if (obj.currentStyle) {
        return obj.currentStyle[name]; //ie
    } else {
        return getComputedStyle(obj, false)[name]; //ff chrome
    }
}

绑定事件

这种方式添加事件IE6/7/8只支持window.event不支持参数传入,
Firefox只支持参数传入不支持其它方式。
IE9/Opera/Safari/Chrome 两种方式都支持。
function myAddEvent(obj, ev, fn) { //绑定事件的兼容写法
    if (obj.attachEvent) {
        obj.attachEvent('on' + ev, fn); //ie
    } else {
        obj.addEventListener(ev, fn, false); //firefox chrome
    }
}

移除事件

function removeEvent(obj, ev, fn) { //移除事件的兼容写法
    if (obj.detachEvent) {
        obj.detachEvent('on' + ev, fn); //ie
    } else {
        removeEventListener(ev, fn, false); //firefox chrome
    }
}

阻止事件冒泡

function stopPropagation(e) { //阻止事件冒泡
    e = e || window.event;
    if (window.event) {
        e.cancelBubble = true; //ie
    } else {
        e.stopPropagation(); //firefox
    }
}

事件源

oUl.onmouseout = function(ev) {
       var ev = ev || window.event;  // 标准浏览器用ev,ie9以下用window.event
       var target = ev.target || ev.srcElement;  //标准浏览器用ev.target  ie浏览器用ev.srcElement

        if (target.nodeName.toLowerCase() == "li") {
              target.style.background = "";
       }
}

阻止浏览器默认行为

function stopDefault(e) {

    if (e && e.preventDefault) e.preventDefault();  //阻止默认浏览器动作(W3C)

    else window.event.returnValue = false;   //IE中阻止函数器默认动作的方式

    return false;

}