js鼠标坐标获取常用的三个方法
更新时间：2023年09月05日 10:46:17 作者：ljxyydx
这篇文章主要给大家介绍了js鼠标坐标获取常用的三个方法,在 JavaScript中当事件发生时获取鼠标的位置是件很重要的事件,需要的朋友可以参考下
js提供了多个获取鼠标点击事件的坐标获取方法
1.相当于你点击的元素来说 （e.offsetX和e.offsetY）
就是以你点击的元素的左上角作为参考系源点获取鼠标在元素中点击的位置
<style>
div{
width: 300px;
height: 300px;
background-color: rebeccapurple;
color: wheat;
margin: 300px auto;
}
</style>
<body>
<div>我的横坐标x:,我的纵坐标y:</div>
</body>
<script>
var oDiv = document.querySelector('div')
oDiv.onclick = function (e) {
console.log(e.offsetX)
console.log(e.offsetY)
// 渲染函数
oDiv.innerHTML = '相对于我点击的这个元素来讲我的横坐标x:' + e.offsetX + ',我的纵
坐标y:' + e.offsetY
}
</script>
在给div添加点击事件，在点击事件中传入事件源e，e中保存着鼠标的点击坐标，我们用offsetX和offsetY就可以获取到鼠标在div中的点击坐标。
2.相对于浏览器可视窗口来说（e.clientX和e.clientY）
可视窗口是指浏览器能够看到内容的窗口，随着滚动条移动，可视窗口的位置也在随着变化，但是都是在以可视窗口的左上角的位置为参考系来获取鼠标的点击位置
oDiv.onclick = function (e) {
console.log(e.clientX)
console.log(e.clientY)
// 渲染函数
oDiv.innerHTML = '相对于浏览器可视窗口来讲我的横坐标x:' + e.clientX + ',我的纵坐标y:' + e.clientY
}3.以页面左上角作为参考系(e.pageX 和 e.pageY)
以页面作为为参考系，与可视窗口不一样，是以整个页面的左上角作为参考系，不随滚动条改变而改变,就是一开始页面的左上角。
oDiv.onclick = function (e) {
console.log(e.pageX)
console.log(e.pageY)
// 渲染函数
oDiv.innerHTML = '相对于页面来讲我的横坐标x:' + e.pageX + ',我的纵坐标y:' + e.pageY
}总结
到此这篇关于js鼠标坐标获取常用的三个方法的文章就介绍到这了,更多相关js获取鼠标坐标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了iscroll实现下拉刷新功能的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍了TypeScript数据类型，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要介绍了js刷新页面location.reload()用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最近客户在使用我们的流量监测系统以及GA时发现了一个问题，我们统计到的数据比GA的要多很多倍，而且我们统计到的数据中，跳出率非常高，高达99%左右。2010-09-09
这篇文章主要介绍了详解Document.Cookie的相关资料,需要的朋友可以参考下2015-12-12
可折叠区域的基本思想：通过点击某个地方来显示或隐藏屏幕中的某个区域。2010-10-10
这篇文章主要介绍了11种ASP连接数据库的方法，需要的朋友可以参考下2015-09-09
js 目录对话框显示代码2008-11-11
这篇文章主要介绍了原生js实现Canvas实现拖拽式绘图，支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了基于JavaScript实现图片切换效果 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论