天天看点

常用的浏览器兼容问题,包含滚动条、获取事件对象、获取非行内样式、获取鼠标编码值、事件监听等

1、滚动条

//1.滚动条到顶端的距离(滚动高度)
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

//2.滚动条到左端的距离
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
           

2、获取非行内样式

//获取非行内样式兼容    IE:currentStyle  标准:getComputedStyle
function getStyle(obj,attr){
    return window.getComputedStyle ? getComputedStyle(obj,true)[attr] : obj.currentStyle[attr];
}
//div.style.width =  '';设置样式
//obj['属性']: 对象是变量时,必须用对象['属性']获取。
           

3、获取事件对象的兼容

evt = evt || window.event
           

4、获取鼠标编码值的兼容

function getButton(evt){
    var e = evt || window.event;
    if(evt){
        return e.button;
    }else if(window.event){
        switch(e.button){
            case 1 : return 0;
            case 4 : return 1;
            case 2 : return 2;
        }
    }
}
           

5、获取键盘按键编码值

var key = evt.keyCode || evt.charCode || evt.which;
           

 6、阻止事件冒泡

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
           

 7、阻止超链接的默认行为

evt.preventDefault ? evt.preventDefault() : evt.returnValue = false;
           

8、添加、移除事件监听

function addEventListener(obj,event,fn,boo){
    if(obj.addEventListener){
        obj.addEventListener(event,fn,boo);
    }else if(obj.attachEvent){
        obj.attachEvent('on' + event,fn);
    }
}
           
function removeEventListener(obj,event,fn,boo){
    if(obj.removeEventListener){
        obj.removeEventListener(event,fn,boo);
    }else if(obj.detachEvent){
        obj.detachEvent('on' + event,fn);
    }
}
           

9、获取事件源

var target = event.target || event.srcElement;
           

继续阅读