-
页面滚动的兼容方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 3000px;
}
</style>
</head>
<body>
</body>
</html>
<script>
window.onscroll = function () {
document.title = scroll().top;
}
/*正常浏览器（除了ie678之外的浏览器）
window.pageYOffset
已经声明DTD（标准模式）
document.documentElement.scrollTop
未声明 DTD（怪异模式）
document.body.scrollTop*/
//这个方法可以给调用者提供 页面被卷去的top值和left值
function scroll() {
if (window.pageYOffset != null) {
return {
"top": window.pageYOffset,
"left": window.pageXOffset
};
} else if (document.compatMode == "CSS1Compat") {
//说明是标准模式 有DTD
return {
"top": document.documentElement.scrollTop,
"left": document.documentElement.scrollLeft
};
} else {
return {
"top": document.body.scrollTop,
"left": document.body.scrollLeft
};
}
}
</script>
-
网页可视区client方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
<script>
window.onresize = function () {
document.title = client().width;
}
/*正常浏览器（包括IE9+）
window.innerWidth
标准模式（包括IE9-）
document.documentElement.clientWidth
怪异模式
document.body.clientWidth*/
//返回一个对象 如果用可视区的宽度 就.width 如果用高度就 .height
function client() {
if (window.innerWidth != null) {
return {
"width": window.innerWidth,
"height": window.innerHeight
}
} else if (document.compatMode == "CSS1Compat") {
//标准模式
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
}
} else {
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
}
}
}
</script>
-
兼容ie6、7、8获取鼠标的坐标方法
function (event) { var event = event || window.event; //event.clientX//相对于客户端的位置 //event.pageX//相对于页面的位置 //event.screenX//相对于屏幕的位置 var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft; var pageY = event.pageY || event.clientY + document.documentElement.scrollTop; }
-
阻止事件冒泡
var event = event || window.event; if (event && event.stopPropagation) {//短路表达式 //说明是正常浏览器 event.stopPropagation(); } else { //兼容ie678 event.cancelBubble = true; }
-
事件目标兼容性
targetId（排除事件触发案例）
返回当前事件对象的id
火狐谷歌等 event.target.id
IE678 event.srcElement.id
var targetId = event.target ? event.target.id : event.srcElement.id;