JavaScript 兼容性问题处理

  • 1. JavaScript 兼容性处理
  • 1.1 常见的兼容性问题
  • 2. 事件监听兼容
  • 2.1 事件监听的兼容性问题
  • 2.2 事件监听的兼容性语法
  • 2.3 事件监听兼容性练习
  • 3. 事件参数对象的兼容性问题
  • 3.1 参数对象
  • 3.2 解决方案
  • 3.3 事件参数兼容性练习
  • 4. 事件源对象的兼容性问题
  • 4.1 事件源对象兼容性练习
  • 5. 事件冒泡
  • 5.1 事件冒泡和捕获
  • 5.2 事件冒泡的兼容性问题
  • 5.3 事件冒泡的实战应用
  • 6. 阻止默认事件的兼容性问题
  • 6.1 阻止默认行为兼容性练习
  • 7. scrollTop 属性的兼容性问题
  • 8. 获取样式的兼容性问题
  • 9. 总结


1. JavaScript 兼容性处理

1.1 常见的兼容性问题

  • 事件监听的兼容性
  • 事件参数对象的兼容性
  • 事件源对象的兼容性
  • 事件冒泡处理的兼容性
  • 事件默认行为的兼容性
  • scrollTop 属性的兼容性
  • 获取非行内样式的兼容性

2. 事件监听兼容

2.1 事件监听的兼容性问题

  • W3C标准
  • 添加事件监听：addEventListener
  • 移除事件监听：removeEventListener
  • IE低版本标准
  • 添加事件监听：attachEvent
  • 移除事件监听：detachEvent

2.2 事件监听的兼容性语法

  • 事件监听兼容性常用语法
if(obj.addEventListener){
	obj.addEventListener("事件名","事件处理函数")
}else{
	obj.attachEvent("on事件名","事件处理函数")
}

2.3 事件监听兼容性练习

<style media="screen">
  #d1 {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
</style>
<script type="text/javascript">
  var div = null;
  function over(){
    this.style.background = '#ff0'
  }
  function out(){
    this.style.background = '#ccc'
  }
  function oldover(){
    div.style.background = '#ff0'
  }
  window.onload = function(){
    // 动态绑定事件的解绑方法
    // div.onmouseover = function(){}
    // div.onmouseover = null
    div = document.getElementById('d1')
    // 判断事件监听的兼容性
    if (div.addEventListener) {
      // 事件监听可以绑定多个方法
      div.addEventListener('mouseover',over)
      div.addEventListener('mouseover',function(){
        this.style.border = '1px solid #00f'
      })
      div.addEventListener('mouseout',out)
      div.addEventListener('click',function(){
        this.style.background = '#f00'
        this.removeEventListener('mouseover',over) // 取消事件监听
        this.removeEventListener('mouseout',out)   // 取消事件监听
      })
    } else {
      div.attachEvent('onmouseover',oldover) // IE 低版本事件监听
      div.attachEvent('onclick',function(){
        div.style.background = '#f00'
        div.detachEvent('onmouseover',oldover) // IE低版本取消事件监听
      })
    }
  }
</script>
 
<body>
   <div id="d1"></div>
 </body>

3. 事件参数对象的兼容性问题

3.1 参数对象

  • 事件参数 event 对象的常用属性

类别

描述

pageX

获取鼠标在整个文档中的X坐标

pageY

获取鼠标在整个文档中的Y坐标

screenX

获取鼠标在屏幕窗口中的X坐标

screenY

获取鼠标在屏幕窗口中的Y坐标

clientX

获取鼠标在可见容器中的X坐标

clientY

获取鼠标在可见容器中的Y坐标

3.2 解决方案

  • IE低版本的事件对象使用window.event表示
function (event){
	var e = event || window.event;
}

3.3 事件参数兼容性练习

<style media="screen">
   #d1 {
     width: 500px;
     height: 300px;
     background-color: #eee;
   }
 </style>
<script type="text/javascript">
  window.onload = function(){
    var d1 = document.getElementById('d1')
    d1.onmousemove = function(event){
      var e = event || window.event
      console.log('e.pageX' + e.pageX);
      console.log('e.pageY' + e.pageY);
      console.log('e.screenX' + e.screenX);
      console.log('e.screenY' + e.screenY);
      console.log('e.clientX' + e.clientX);
      console.log('e.clientY' + e.clientY);
    }
  }
</script>
<body style="height: 2000px;">
  <div id="d1"></div>
</body>

4. 事件源对象的兼容性问题

  • IE的事件源对象的获取
  • window.event.srcElement
  • W3C事件源对象的获取
  • Event.target

4.1 事件源对象兼容性练习

<style media="screen">
  #d1 {
    width: 500px;
    height: 300px;
    background-color: #eee;
  }
</style>
<script type="text/javascript">
  window.onload = function(){
    var d1 = document.getElementById('d1')
    d1.onmousemove = function(event){
      var e = event || window.event     // 事件参数兼容性写法
      console.log(e.target.id);         // 新浏览器使用
      console.log(e.srcElement.id);     // IE 老版本浏览器使用
    }
  }
</script>
<body style="height: 2000px">
  <div id="d1"></div>
</body>

5. 事件冒泡

5.1 事件冒泡和捕获

firstChild javascript 兼容 javascript兼容性问题_JavaScript 兼容性

5.2 事件冒泡的兼容性问题

  • IE的事件冒泡的中止方法
  • window.event.cancelBubble
  • W3C事件冒泡的中止方法
  • stopPropagation
function addEventHandler(target , type , fn){
   if(target.addEventListener){
 	target.addEventListener(type , fn);
   }else{
 	target.attachEvent("on"+type , fn);
   }
}

5.3 事件冒泡的实战应用

  • 模态框功能
<style media="screen">
  html,body{height: 100%}
  #mask {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    position: fixed;
    left: 0;
    top: 0;
    display: none;
  }
  #message {
    width: 300px;
    height: 300px;
    margin: 200px auto;
    border: 1px solid #ccc;
    position: relative;
    background-color: #fff;
    display: none;
  }
</style>
<script type="text/javascript">
  window.onload = function () {
    document.getElementById('btnOpen').onclick = function(e){
      var e = e || window.event
      document.getElementById('mask').style.display = 'block'
      document.getElementById('message').style.display = 'block'
      if (e.stopPropagation) {
        e.stopPropagation()  // 阻止事件冒泡
      }else{
        e.cancelBubble = true  // IE 低版本阻止事件冒泡
      }
    }
    document.onclick = function(){
      document.getElementById('mask').style.display = 'none'
      document.getElementById('message').style.display = 'none'
    }
  }
</script>
<body style="height: 2000px">
  <input id="btnOpen" name="" value="打开模态框" type="button">
  <div id="mask"></div>
  <div id="message">信息提示</div>
</body>

6. 阻止默认事件的兼容性问题

  • IE的事件默认事件的阻止方法
  • window.event.returnValue
  • W3C事件冒泡的阻止方法
  • preventDefault
function prevent(ent){
   if(window.event){
 		window.event.returnValue = false;
   }else{
 		ent.preventDefault();
   }
}

6.1 阻止默认行为兼容性练习

<script type="text/javascript">
  window.onload = function(){
    document.getElementById('myLink').onclick = function(e){
      alert('执行验证操作')
      var e = e || window.event
      if (e.preventDefault) {
        e.preventDefault()      // 阻止默认行为
      }else{
        e.returnValue = false;  // IE 低版本阻止默认行为
      }
    }
  }
</script>
<body>
  <a href="http://www.163.com" id="myLink">跳转</a>
</body>

7. scrollTop 属性的兼容性问题

  • scrollTop 属性值的获取方式
  • document.body.scroll属性(已废弃)
  • document.documentElement.scroll属性
var  scrollTop =  document.body.scrollTop || document.documentElement.scrollTop || 0

8. 获取样式的兼容性问题

  • 获取内嵌式或外部样式的方式
  • 使用obj.currentStyle
  • 使用window.getComputedStyle 
if（obj.currentStyle）{
     return obj.currentStyle[“attr”];
} else {
     return  window.getComputedStyle(obj,null)[“attr”];
}

9. 总结

  • JavaScript 兼容浏览器写法，做个笔记