學習筆記。
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”其定位原點是目前頁面左上角，不随滾動條改變而改變。