学习笔记。
1. offset：其定位原点是当前元素左上角
2. client：其定位原点是当前窗口左上角
3. page：其定位原点是当前页面左上角
下面来验证一下。
先上代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
#div1 {
width: 200px;
height: 200px;
position: absolute;
top: 400px;
left: 100px;
background-color: rebeccapurple;
}
</style>
<script>
$(function(){
$("#div1").click(function(event){
console.log("offsetX值为："+event.offsetX," offsetY值为："+event.offsetY);
console.log("clientX值为："+event.clientX," clientY值为："+event.clientY);
console.log("pageX值为："+event.pageX," pageY值为："+event.pageY);
console.log("---------------------------------------")
})
})
</script>
</head>
<body style="height: 2000px">
<div id="div1"></div>
</body>
</html> 1.若不移动滚动条，点击该div左上角会有如下结果：
2.若不移动滚动条，点击该div的右下角则有：
3.若向下移动滚动条，再次点击该div左上角，则得到如下结果：
4.若向下移动滚动条，并点击该div右下角，则：
由“2”和“4”可以看到，“offset”的值正好与其宽度和高度相等，“offset”其定位原点在当前元素左上角。
由“1”与“3”对比可以看到，“offset“与“page“的值并没有发生改变，页面滚动改变的只有“client”的值，“client”的原点在当前窗口的左上角，会随着滚动条的改变而改变。
由“1”和“3”可以看到，虽然向下移动滚动条，但是点击相同位置其“page“的值并不改变，“page”其定位原点是当前页面左上角，不随滚动条改变而改变。