event对象代表事件的状态,跟事件相关的一系列信息的集合。
e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX | 返回鼠标相对于文档页面的X坐标 IE9以上支持 |
e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9以上支持 |
e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
<style>
body{
height:3000px;
}
</style>
<script>
document.addEventListener('click', function(e){
// client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('↑可视区');
// page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('↑页面');
// screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
console.log('↑屏幕');
})
</script>