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 = 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)
div.attachEvent('onclick',function(){
div.style.background = '#f00'
div.detachEvent('onmouseover',oldover)
})
}
}
</script>
<body>
<div id="d1"></div>
</body>
3. 事件参数对象的兼容性问题
3.1 参数对象
| 类别 |
描述 |
| 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. 事件源对象的兼容性问题
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);
}
}
</script>
<body style="height: 2000px">
<div id="d1"></div>
</body>
5. 事件冒泡
5.1 事件冒泡和捕获
5.2 事件冒泡的兼容性问题
IE的事件冒泡的中止方法
window.event.cancelBubble
W3C事件冒泡的中止方法
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
}
}
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的事件默认事件的阻止方法
W3C事件冒泡的阻止方法
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;
}
}
}
</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. 总结