鼠标事件中的位置相关的属性ScreenX,ClientX,pag
2021-08-31 本文已影响0人
YoungEvita
定义
鼠标事件中属性和键盘相关的属性
- srceenX
（通用属性）相对于屏幕左上角的位置 - clientX
（通用属性）相对于浏览器的可视区域（浏览器窗口左上角），不包括滚动条 - pageX
（非标准属性，IE9以上支持）相对于整个文档，包括滚动条 - layerX
（非标准属性，IE9以上支持）对于当前事件结点而言，本身或者父元素有position:absolute/relative有定位点, 表示鼠标当前位置和可以定位的自身或父元素之间的距离，以border为参考点, 包括border - offsetX
（通用，IE私有，其他浏览器实现了）鼠标事件发生时，鼠标所在的位置和触发事件的元素之间的距离，以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">
父节点
<div class="child">
子节点
</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、页面出现滚动条，且子节点不设置定位，无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">
父节点
<div class="child">
子节点
</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， 无滚动条，点击父节点，父节点有定位
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">
父节点
<div class="child">
子节点
</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
