网络做单犯法吗（JS兼容问题总结）
JS兼容问题总结
“标准浏览器 ”和“低版本浏览器（IE） ”兼容写法
一 、浏览器卷去的高度和宽度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft两个都是获取页面向上滚动的距离
区别：
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兼容：方式1：if (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> <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> <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); }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！