JS兼容性问题

给大家发一些原生JS处理兼容性的解决方案

---

1.获取滚动条滚动的距离

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

2.获取非行间样式

IE：currentStyle[attr];  标准：getComputedStyle[attr];
    function getStyle(obj,attr){
        if(currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

3.获取事件对象

var e = e || event;

4.获取键盘信息

var code = e.keyCode || e.which;

5.阻止浏览器的默认行为

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

6.阻止事件冒泡

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

7.事件监听

//绑定
addEventListener();
attachEvent();
//移除
removeEventListener();
detachEvent();

8.事件解绑

removeEventListener();
detachEvent();

9.获取事件源

e.target = e.srcElement;

10.网页可视区域兼容

window.innerHeight || document.documentElement.clientHeight
window.innerWidth || document.documentElement.clientWidth

---

11.鼠标滚轮判断(别处摘抄)

    /*对于mousedown 和mouseup 事件来说，则在其event 对象存在一个button 属性，
表示按下或释放的按钮。DOM的button 属性可能有如下3 个值：0 表示主鼠标按钮，1 表示中间的鼠
标按钮（鼠标滚轮按钮），2 表示次鼠标按钮。在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标
按钮就是鼠标右键。
IE8 及之前版本也提供了button 属性，但这个属性的值与DOM 的button 属性有很大差异。
 0：表示没有按下按钮。
 1：表示按下了主鼠标按钮。
 2：表示按下了次鼠标按钮。
 3：表示同时按下了主、次鼠标按钮。
 4：表示按下了中间的鼠标按钮。
 5：表示同时按下了主鼠标按钮和中间的鼠标按钮。
 6：表示同时按下了次鼠标按钮和中间的鼠标按钮。
 7：表示同时按下了三个鼠标按钮。*/
getButton: function(event){
    if (document.implementation.hasFeature("MouseEvents", "2.0")){
        return event.button;
    } else {
        switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
            return 0;
            case 2:
            case 6:
            return 2;
            case 4:
            return 1;
        }
    }
}

原生JS是根本，勿忘初心，方得始终

转载于:https://www.cnblogs.com/bai1218/p/10042172.html