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获取鼠标坐标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript 生成唯一ID的几种方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-02-02
JavaScript使用WebSocket实现实时通信的技术详解
WebSocket作为一种高效的通信协议,为开发者提供了一种在客户端和服务器之间进行全双工通信的方法,本文将深入探讨WebSocket技术,并提供实战代码示例2024-04-04
这篇文章主要介绍了浅谈使用MVC模式进行JavaScript程序开发,同时也介绍了一些JavaScript的MVC框架,需要的朋友可以参考下2015-11-11
JavaScript中几种常见排序算法小结，学习js的朋友可以参考下，下面对多种方法进行了简单的小结。2011-02-02
这篇文章主要介绍了js微信扫描二维码登录网站技术原理,具有一定的参考价值，有需要的可以了解一下。2016-12-12
下面小编就为大家带来一篇js 定位到某个锚点的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
这篇文章主要介绍了前端实现截屏的两种常见方式,分别是使用第三方库html2canvas和navigator.mediaDevices.getDisplayMedia,两种方法都给出了详细的代码示例,需要的朋友可以参考下2025-03-03
这篇文章主要为大家详细介绍了微信小程序实现简单搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要为大家详细介绍了如何使用JavaScript优雅实现文本展开收起功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
这篇文章主要介绍了js使用cookie记录用户名的方法,通过完整实例形式分析了JavaScript针对cookie的创建、赋值及删除等操作技巧,以及通过cookie记录用户登录信息的方法,需要的朋友可以参考下2015-11-11
最新评论