这篇博客总结了如何在JavaScript中获取鼠标点击时相对于屏幕、浏览器窗口和文档的坐标。介绍了screenX/Y, clientX/Y, pageX/Y等属性，并提供了兼容处理示例，用于动态调整元素位置。"
86308923,8224624,深度学习时间序列分析：TreNet模型详解,"['神经网络', '时间序列', '深度学习模型', '预测模型', 'LSTM应用']
在上一篇：js鼠标事件总结中，有提到鼠标事件的主要作用和目的，本意是为了解释鼠标事件为什么要写兼容处理。而本篇主要是总结当鼠标点击窗口时，如何获取它的坐标及其应用。
1.获取鼠标点击的位置坐标
screen相对于屏幕
- screenX 获取点击位置相对于屏幕的左边距离
- screenY 获取点击位置相对于屏幕的上边距离
（不考虑iframe因素，不同浏览器下表现的还算一致。）
例：
document.function(ev){
var oEvent=ev||event;
alert(oEvent.screenX+'，'+oEvent.screenY);// IE浏览器兼容
}；
client相对浏览器窗口
document.function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+'，'+oEvent.clientY);// IE浏览器兼容
}；
page相对文档
clientX与clientY获取的是相对于当前屏幕的坐标，忽略页面滚动因素，这在很多条件下很有用，但当我们需要考虑页面滚动，也就是相对于文档（body元素）的坐标时，该怎么实现了？方法很简单，计算出页面滚动的位移，加上滚动的位移就可以了。
在Firefox下问题会简单很多，因为Firefox支持属性pageX,与pageY属性，这两个属性已经把页面滚动计算在内了。在Chrome可以通过document.body.scrollLeft，document.body.scrollTop计算出页面滚动位移，而在IE下可以通过document.documentElement.scrollLeft ，document.documentElement.scrollTop
例：div跟随鼠标移动——page ，client 的综合运用
<style>
#box{ width: 50px; height: 50px; background: red; position: absolute;}
</style>
<script>
document.function(ev){
var oBox=document.getElementById('box');
//兼容性处理
var oEvent=ev||event;
//兼容性处理
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
oBox.style.left=oEvent.clientX + scrollTop + 'px'; //clientX可视区内的水平坐标
oBox.style.top=oEvent.clientY + scrollLeft + 'px'; //clientY......垂直...
};
</script>
</head>
<body style="height: 2000px; width: 3000px;">
<div id="box"></div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
