JS中常见的兼容问题处理

1. 获取非行内样式的兼容

高级浏览器：getComputedStyle(元素,伪元素).CSS属性名
IE浏览器：元素.currentStyle.CSS属性名

兼容处理：

function getStyle(ele,attr){  // ele为元素；attr为属性
    if(ele.currentStyle){
        return ele.currentStyle[attr];
    }else{
        return getComputedStyle(ele, null)[attr];
    }
}

2. 事件对象的兼容

高级浏览器：事件处理函数的第一个参数
IE浏览器：寻找window对象身上的event

兼容处理：var e = eve || window.event;

document.onclick = function(eve){
    var e = eve || window.event;
    console.log(e);
}

3. 键盘事件的兼容

高级浏览器：eve.keyCode
IE浏览器：eve.which
兼容处理：var kc = eve.keyCode || eve.which;

4. 阻止事件冒泡的兼容

高级浏览器：eve.stopPropagation();
IE浏览器：eve.cancelBubble = true;

兼容处理：

function stopBubble(e){  // e为事件对象的兼容处理；下同
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

5. 阻止默认事件的兼容

高级浏览器：e.preventDefault();
IE浏览器：e.returnValue = false;

兼容处理：

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

6. 事件目标的兼容

高级浏览器：e.target
IE浏览器：e.srcElement

兼容处理：var tar = e.target || e.srcElement;

<body>
    <div class="box">
        <input type="button" value="点我">
    </div>
<script>
    var obox = document.querySelector(".box");
    obox.onclick = function(eve){
        var e = eve || window.event;
        var tar = e.target || e.srcElement;
        console.log("事件源是：",this);
        console.log("事件目标是：",tar);
    }
</script>
</body>

7. 监听式绑定事件（DOM2级事件绑定）与移除的兼容

监听式绑定事件的兼容
- 高级浏览器：
  - 元素.addEventListener(事件类型,事件处理函数,布尔值);
  - btn.addEventListener("click",fn,false);
    - false：事件冒泡，默认值
    - true：事件捕获
- IE浏览器：
  - 元素.attachEvent("on"+事件类型,事件处理函数);
  - btn.attachEvent("onclick",fn);
  - IE只支持事件冒泡，不支持事件捕获
- 兼容处理：
```
function addEvent(ele,type,cb){  // ele为元素；type为事件类型；cb为callback回调函数；下同
    if(ele.addEventListener){
        ele.addEventListener(type,cb,false);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,cb);
    }else{
        ele["on"+type] = cb;
    }
}
```
移除监听事件的兼容
- 高级浏览器：
  - 元素.removeEventListener(事件类型,事件处理函数,布尔值);
  - btn.removeEventListener("click",function(){},false);
- IE浏览器：
  - 元素.detachEvent("on"+事件类型,事件处理函数);
  - ele.detachEvent("on"+type,cb);
- 兼容处理：
```
function removeEvent(ele,type,cb){
    if(ele.removeEventListener){
        ele.removeEventListener(type,cb,false);
    }else if(ele.detachEvent){
        ele.detachEvent("on"+type,cb);
    }else{
        ele["on"+type] = null;
    }
}
```
- 注意：移除的事件处理函数和绑定的事件处理函数必须是同一个。

最后编辑于：2020.10.19 21:59:25