MouseEvent 接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括:click,dblclick,mouseup,mousedown。
MouseEvent 派生自 UIEvent,UIEvent 派生自 Event. 如下图所示.
写一段代码
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: #f78;
border: 2px solid #b2b2b2;
margin: 50px auto;
}
</style>
<div></div>
var div = document.querySelector('div')
div.addEventListener('click', clickHandler)
function clickHandler(e) {
// 这里的 e 其实就是一个 MouseEnevt 对象
console.log(e);
}
当我们点击 div 的时候,就会打印 MouseEvent
对象 ,以下框起来的属性就是坐标相关的属性啦。
clientX、clientY、x、y
返回当前点击的位置到可视区域的顶部和左侧的距离
function clickHandler(e) {
console.log(e.clientX, e.clientY);
}
x、y 是 MouseEvent.clientX 和 MouseEvent.clientY 的别名. 所以是和他俩一样一样的.
offsetX、offsetY
相对于目标元素
e.target
的左上角距离
var div = document.querySelector('div')
div.addEventListener('click', clickHandler)
function clickHandler(e) {
console.log(e.offsetX, e.offsetY);
}
pageX、pageY、screenX、screenY
pageX、pageY 是相对于页面左上角的距离
screenX、screenY 是相对于屏幕左上角的距离
console.log(e.pageX, e.pageY);
console.log(e.screenX, e.screenY);