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获取鼠标坐标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章给大家主要介绍了通过网页查看JS源码的时候，发现汉字显示是乱码的解决方法，文中通过图文详解的介绍了解决的步骤，详细会对大家很有帮助，有需要的朋友们下面来一起看看吧。2016-10-10
日期范围选择器是一个常见的Web应用功能,它允许用户选择一个日期范围,本文我们将使用JavaScript来实现这个功能,感兴趣的小伙伴可以了解下2024-01-01
页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是</body>之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何?2009-11-11
这篇文章主要介绍了JavaScript Tab菜单实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了JavaScript实现百度搜索框效果2018-05-05
，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
这篇文章主要介绍了JavaScript如何向页面中添加一个按钮,使用两种方式向页面中添加一个按钮,分别是appendChild()和innerHTML属性,本文结合示例代码介绍的非常详细,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Javascript自定义事件，本质就是观察者模式，好处就是将绑定事件和触发事件相互隔离开等等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了javascript简单实现滑动菜单效果的方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
BootstrapTable refresh 方法使用实例简单介绍
本文就bootstrapTable refresh 方法如何传递参数做简单举例说明，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-02-02
click方法可以用来模拟用户点击。有的浏览器中所有元素都具有click方法，有的浏览器则没有。2011-07-07
最新评论