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 = 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 参数对象
事件参数 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);
}
}
</script>
<body style="height: 2000px">
<div id="d1"></div>
</body>
5. 事件冒泡
5.1 事件冒泡和捕获
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
}
}
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;
}
}
}
</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 兼容浏览器写法，做个笔记
