定義
鼠標事件中屬性和鍵盤相關的屬性
- srceenX
（通用屬性）相對于屏幕左上角的位置 - clientX
（通用屬性）相對于瀏覽器的可視區(qū)域（瀏覽器窗口左上角），不包括滾動條 - pageX
（非標準屬性，IE9以上支持）相對于整個文檔，包括滾動條 - layerX
（非標準屬性，IE9以上支持）對于當前事件結點而言，本身或者父元素有position:absolute/relative有定位點, 表示鼠標當前位置和可以定位的自身或父元素之間的距離，以border為參考點, 包括border - offsetX
（通用，IE私有，其他瀏覽器實現(xiàn)了）鼠標事件發(fā)生時，鼠標所在的位置和觸發(fā)事件的元素之間的距離，以content 為參考點，有padding時，包括padding
實例
1、當鼠標事件所在的元素自身有定位點且無borer,padding是 layerX == offsetX
當頁面無滾動條是clientX == pageX
<style>
.parent {
margin: auto;
background-color: pink;
width:400px;
height:400px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: bisque;
width: 100px;
height:100px;
position: relative;
}
</style>
</head>
<body>
<div class="parent">
父節(jié)點
<div class="child">
子節(jié)點
</div>
</div>
</body>
<script>
document.addEventListener('click', function(e) {
console.log(e)
console.log('screenX, screenY', e.screenX, e.screenY)
console.log('clientX, pageX', e.clientX, e.pageX)
console.log('clientY, pageY', e.clientY, e.pageY)
console.log('offsetX, layerX', e.offsetX, e.layerX)
})
</script>
示意圖.png
2、頁面出現(xiàn)滾動條，且子節(jié)點不設置定位，無padding,無border
pageX = clientX + pageXOffset
pageX == layerX
<head>
<style>
.parent {
margin: auto;
background-color: pink;
width:800px;
height:400px;
display: flex;
justify-content: center;
align-items: center;
}
.child {
background-color: bisque;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div class="parent">
父節(jié)點
<div class="child">
子節(jié)點
</div>
</div>
</body>
<script>
document.addEventListener('click', function(e) {
console.log(e)
console.log('screenX', e.screenX)
console.log('clientX, pageX, pageXOffset', e.clientX, e.pageX, window.pageXOffset)
console.log('offsetX, layerX', e.offsetX, e.layerX)
})
</script>
2.png
3、設置父元素border，padding， 無滾動條，點擊父節(jié)點，父節(jié)點有定位
layerX 以border為起點包括boder
offsetX 不包括boder, 包括padding
<head>
<style>
.parent {
margin: auto;
position: relative;
background-color: pink;
width:800px;
height:400px;
display: flex;
justify-content: center;
align-items: center;
border:10px solid red;
padding:20px
}
.child {
background-color: bisque;
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div class="parent">
父節(jié)點
<div class="child">
子節(jié)點
</div>
</div>
</body>
<script>
document.addEventListener('click', function(e) {
console.log(e)
console.log('screenX', e.screenX)
console.log('clientX, pageX, pageXOffset', e.clientX, e.pageX, window.pageXOffset)
console.log('offsetX, layerX', e.offsetX, e.layerX)
})
</script>
3.png
