JS兼容问题总结

  • JS兼容问题总结已关闭评论
  • 8 次浏览
  • A+
所属分类:Web前端
摘要

JS兼容问题总结 “标准浏览器”和“低版本浏览器(IE)”兼容写法两个都是获取页面向上滚动的距离

JS兼容问题总结

“标准浏览器”和“低版本浏览器(IE)”兼容写法

一、浏览器卷去的高度和宽度

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

JS兼容问题总结

  • 两个都是获取页面向上滚动的距离

  • 区别:

    • Chrome 和 FireFox、IE 浏览器

      • 没有 DOCTYPE 声明的时候,用 document.body.scrollTop

      • DOCTYPE 声明的时候,用 document.documentElement.scrollTop

    • Safari

      • 两个都不用,使用一个单独的方法 window.pageYOffset


二、处理事件对象兼容

    function (e) { 	   var e = e || window.event     }

e--标准浏览器;

window.event--低版本浏览器(IE);

 


三、 按键兼容

事件对象里面有一个叫做 keyCode 的属性,
表示你按下的是哪一个按键,但是是以编码的形式给你
特性: FireFox < 20的版本不支持
火狐低版本使用 which 属性

    //兼容:     var code = e.keyCode || e.which

 


四、阻止事件传播的兼容(冒泡和捕获)

 标准浏览器: e.stopPropagation()
IE低版本: e.cancelBubble = true

兼容:
       方式1if (e.stopPropagation) { } else { }
       方式2: try {} catch (e) { } (尝试第一个大括号里面的代码,如果报错,执行后面的)

 


五、处理事件目标兼容

目标准确触发事件的那个元素,在事件对象里面有一个属性叫做 target 表示本次事件触发的时候,准确触发的元素我们叫做事件目标
IE低版本不支持
IE低版本使用 srcElement

处理兼容
var target = e.target || e.srcElement

target

  • target 这个属性是事件对象里面的属性,表示你点击的目标

  • 当你触发点击事件的时候,你点击在哪个元素上,target 就是哪个元素

  • 这个 target 也不兼容,在 IE 下要使用 srcElement

    <body>       <ul>         <li>1</li>         <li>2</li>         <li>3</li>       </ul>       <script>       	var oUl = docuemnt.querySelector('ul')              oUl.addEventListener('click', function (e) {           e = e || window.event           var target = e.target || e.srcElement           console.log(target)         })       </script>     </body>
    • 上面的代码,当你点击 ul 的时候,target 就是 ul

    • 当你点击在 li 上面的时候,target 就是 li

 


 

六、获取元素非行间样式兼容

getComputedStyle(非IE使用)

  • 语法:window.getComputedStyle(元素, null).要获取的属性

  • 第二个参数不写的时候默认是null,表示是一个正常元素

  • 第二个参数可以写'after' || 'before',表示获取伪元素的样式

<style>       div {         width: 100px;       }     </style>     <body>       <div style="height: 100px;">         <p>我是一个 p 标签</p>       </div>        <script>         var oDiv = document.querySelector('div') 	    	console.log(window.getComputedStyle(oDiv).width) // 100px         console.log(window.getComputedStyle(oDiv).height) // 100px       </script>     </body>      //这个方法获取行间样式和非行间样式都可以

 

currentStyle(IE使用)

语法:元素.currentStyle.要获取的属性

 

    <style>       div {         width: 100px;       }     </style>     <body>       <div style="height: 100px;">         <p>我是一个 p 标签</p>       </div>        <script>         var oDiv = document.querySelector('div')     		console.log(oDiv.currentStyle.width) // 100px         console.log(oDiv.currentStyle.height) // 100px       </script>     </body>

 


 

七、 阻止浏览器默认行为的兼容

标准浏览器: e.preventDefault()

IE 低版本: e.returnValue = false

    //兼容:        方式1: if (e.preventDefault) {} else {}        方式2: try {} catch (err) {}        方式3: return false (大部分情况下是可以用的)
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Document</title> </head> <body>    <a href="https://www.baidu.com">阻止浏览器默认行为</a>    <script>          // 获取元素     var a = document.getElementsByTagName('a')[0]      a.onclick = function (e) {       e = e || window.event       console.log('我被点击了')        // 阻止默认事件       // e.preventDefault()        // IE 低版本       // e.returnValue = false        return false     } 	 	//禁止框选文本     window.onselectstart = function () {       return false     }      // 右键单击事件     window.oncontextmenu = function () {       console.log('右键单击了')       return false     }    </script> </body> </html>

 

八、事件监听的绑定兼容

  • addEventListener : 非 IE 7 8 下使用

  • 语法: 元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)

    oDiv.addEventListener('click', function () {       console.log('我是第一个事件')     }, false)      oDiv.addEventListener('click', function () {       console.log('我是第二个事件')     }, false)
  • 当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序执行

  • 先打印 我是第一个事件 再打印 我是第二个事件

 注意: 事件类型的时候不要写 on,点击事件就是 click,不是 onclick;

 

  • attachEvent :IE 7 8 下使用

  • 语法: 元素.attachEvent('事件类型', 事件处理函数)

    oDiv.attachEvent('onclick', function () {       console.log('我是第一个事件')     })      oDiv.attachEvent('onclick', function () {       console.log('我是第二个事件')     })

 

  • 当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序倒叙执行

  • 先打印 我是第二个事件 再打印 我是第一个事件

注意: 事件类型的时候要写 on,点击事件就行 onclick;

 

两个方式的区别

  • 注册事件的时候事件类型参数的书写

    • addEventListener : 不用写 on

    • attachEvent : 要写 on

  • 参数个数

    • addEventListener : 一般是三个常用参数

    • attachEvent : 两个参数

  • 执行顺序

    • addEventListener : 顺序注册,顺序执行

    • attachEvent : 顺序注册,倒叙执行

  • 适用浏览器

    • addEventListener : 非 IE 7 8 的浏览器

    • attachEvent : IE 7 8 浏览器

 

 


 

 九、事件解绑

  • removeEventListener: 非 IE 7 8 下使用

  • 语法:元素.removeEventListener('事件类型', 事件处理函数, 冒泡还是捕获)

  • detachEvent:IE 7 8 下使用

  • 语法:元素.detachEvent('事件类型', 事件处理函数)

    var x = document.getElementById("myDIV");     if (x.removeEventListener) {                   // // 所有浏览器,除了 IE 8 及更早IE版本         x.removeEventListener("mousemove", myFunction);     } else if (x.detachEvent) {                   // IE 8 及更早IE版本         x.detachEvent("onmousemove", myFunction);     }