一、event 是什么？
浏览器在调用事件处理函数的时候，会传进去一个实际参数，这个参数是一个对象，表示这次点击事件的所有细节。比如按的什么按钮、点击的位置等等。
所以，我们的事件处理函数，就要通过一个形式参数来接收。
oDiv.onclick = function(event){}
比如，获得鼠标当前的位置：
document.onmousemove = function(event){
event = event || window.event;//兼容性代码
h1.innerHTML = "当前鼠标坐标为" + event.clientX + "," + event.clientY;
}
event.clientX表示触发事件的时候，鼠标的 x 位置（相对于视口浏览器）
二、鼠标位置
event.clientX
event.clientY
event.screenX
event.screenY
event.offsetX
event.offsetY
event.pageX
event.pageY
这六个值都没有单位。
clientX表示鼠标距离视口左边x值
screenX表示鼠标距离整个屏幕左边x值
offsetX 鼠标距离触发事件的x距离
pageX 页面有滚动条鼠标距离左边距的距离
我们现在说的，是oDiv这个元素在页面中的净位置，自己起一个名字allTop。
得到allTop不难，迭代，一层一层的累加offsetTop值。
思考？在之前写的鼠标拖拽事件会发现，我们使用 offsetTop 来修复进入事件时候，盒子乱蹦。因为 oDiv.offsetTop 指的是这个盒子的 border 外层到自己的 offsetParent 的 border 内侧。如果是盒子套盒子，有定位的话没事，但是如果操作的盒子只有一个并且 body 过大，出现了滚动条，一旦滚动就会出现 offsetTop的问题！
三、输出页面滚动值 scroll
scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style>
body {
height: 5555px;
}
.box1 {
height: 500px;
width: 300px;
background-color: #f3c51d;
padding-top: 300px;
}
.box2 {
height: 200px;
width: 200px;
background-color: #5f55ff;
padding: 20px;
}
.box3 {
height: 150px;
width: 150px;
background-color: #26f378;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<h6></h6>
</div>
</div>
</div>
<script>
var h1 = document.getElementsByTagName("h6")[0];
//当窗口卷动的时候发生这个事件
window.onscroll = function(){
//document.documentElement就是<html>标签
h1.innerHTML = document.body.scrollTop || document.documentElement.scrollTop;
}
</script>
</body>
</html>
四、得到一个盒子净 top (盒子到浏览器位置的top)
这时如果盒子发生嵌套，没有定位的时候（也就是只有一个offsetparent）使用 offsetTop 会得到到浏览器的位置。就不用封装函数了，但是万一中间有盒子有定位，就得不到到浏览器盒子的净 top 值了，这招就行不通了。只能通过计算这个盒子元素所 offsetParent 的 offsetTop 值的和。但是这个方法还得注意所有的 offsetparent 盒子没有 border。
<body>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<h6></h6>
</div>
</div>
</div>
<script>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
//console.log(box3.offsetTop); 未定位之前354px
//返回这个元素在页面中的净位置
//就是这个元素所有offsetParent的offsetTop值的和
function getAllTop(obj){
//累加器，累加器的初始值不是0，而是自己现在offsetTop值
//一会儿while语句直接从它爸开始了
var allTop = obj.offsetTop;
//当前正在算高度的元素
var currentObj = obj;
while(currentObj = currentObj.offsetParent){
allTop += currentObj.offsetTop;
}
return allTop;
}
// function getAlltop(obj){
// // var gettop = 0;
// // while(obj.offsetParent){
// // gettop+=obj.offsetTop;
// // obj = obj.offsetParent;
// // }
// // return gettop;
// }
</script>
</body>
</html>
五、得到一个盒子内部的坐标 使用 offsetX 和 offsetY
offsetX 和 offsetY 是鼠标距离触发事件的X距离和Y距离！
offsetX 和 offsetY.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动</title>
<style>
body {
height: 5555px;
}
div {
height: 300px;
width: 300px;
background-color: #f3c51d;
margin: 100px 100px;
}
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.onmousemove = function(event){
console.log(event);
var x = event.offsetX;
var y = event.offsetY;
box.innerHTML = x + " " + y;
}
</script>
</body>
</html>
网友评论