JavaScript 兼容性处理积累一

JavaScript 事件兼容性处理

1、event
火狐、IE 7和8不支持 window.event事件，需要把事件作为形参带到函数体中才能有效果。因此当需要获取鼠标点击事件时，需要做兼容处理。（2018-04-03）

document.onclick = function(ev){
    var oEvent = ev || window.event;
    alert(oEvent.clientX + ',' + oEvent.clientY);
}

2、阻止冒泡事件
JavaScript 执行事件的时候，一般遵循两个事件阶段，一个是捕获阶段，事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走。另一个是冒泡阶段，执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走。
·针对不同的浏览器，通常需要对事件cancelBubble进行兼容性处理。（2018-04-03）

<style type="text/css">
    .div1{
        width: 600px;
        height: 800px;
        background-color: red;
    }
    .div2{
        width: 400px;
        height: 600px;
        background-color: green;
    }
    .div3{
        width: 200px;
        height: 300px;
        background-color: yellow;
    }
</style>
<div class="div1" id="div1">
    <div class="div2" id="div2">
        <div class="div3" id="div3"></div>
    </div>
</div>
<script type="text/javascript">
window.onload = function(){
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var div3 = document.getElementById('div3');

    div3.onclick = function(ev){
        var oEvent = ev || window.event;
        alert('333');
        oEvent.cancelBubble = true;
    }
    div2.onclick = function(ev){
        var oEvent = ev || window.event;
        alert('222');
        oEvent.cancelBubble = true;
    }
    div1.onclick = function(ev){
        var oEvent = ev || window.event;
        alert('111');
        oEvent.cancelBubble = true;
    }
}
</script>

3、scrollTop
IE 7,8，Firefox:
对于没有<!DOCTYPE html>声明的页面里可以使用document.body.scrollTop来获取scrollTop高度。
对于有<!DOCTYPE html>声明的页面里可以使用document.documentElement.scrollTop来获取scrollTop高度。
Safari:
safari有自己获取scrollTop的函数，window.pageYOffset；
Google:
直接使用document.documentElement.scrollTop；

4、attachEvent与 addEventListener 兼容性
attachEvent是IE浏览器的IE7,8浏览器专门识别的事件，其他浏览器或者版本（IE9及以上），使用addEventListener来获取事件，因此需要做兼容性处理

<input type="button" name="button" id="btn1" value="按钮">
var btn = document.getElementById('btn1');

<script type="text/javascript">
if(window.attachEvent){
    btn.attachEvent('onclick', function(){
    alert('a');
   });
   btn.attachEvent('onclick', function(){
    alert('b');
   });
}else{
    btn.addEventListener('click',function(){
    alert('a');
    },false);
    btn.addEventListener('click',function(){
    alert('b');
    },false);
}
</script>

写一个通用函数来处理类似问题；

function myAddEvent(obj,ev,fn){
  if(obj.attachEvent){
    obj.attachEvent('on' + ev,fn);
  }else{
    obj.addEveventListener(ev,fn,false);
  }
}
myAddEvent(btn,click,function(){
  alert('a');
})
myAddEvent(btn,click,function(){
  alert('b');
})

PS：attachEvent在IE7,8浏览器中，因为浏览器的历史原因，a和b的出现次数会相反，会先出来b，而后出来a。

JavaScript 兼容性处理积累一

JavaScript 事件兼容性处理

猜你喜欢