javascript - 获取鼠标点击的位置,点击的元素是参考点
问题描述
我想获取每次鼠标单击的坐标,并将元素的起点作为参考点(因此单击左上角的第一个像素将为 0,0)。
我知道诸如 pageX/Y 和 clientX/Y 之类的函数,但它们使用不同的参考点。
解决方案
你可以通过应用这个小技巧来做到这一点:你得到 pageX 和 pageY 坐标,然后你子元素偏移坐标(这是元素离 pageX/pageY 的距离),你可以选择任何你想成为的元素这个例子的参考点我们有<div id="test"></div>
var testDiv = document.getElementById("test")
testDiv.addEventListener("click",function(e){
var crd = {x :0,y:0};
crd.x = e.pageX - testDiv.offsetLeft
crd.y = e.pageY - testDiv.offsetTop
console.log(crd)
})
* {
margin:0;
padding:0;
box-sizing : border-box;
}
#test{
margin: 60px;
width : 200px;
height : 200px;
border : 2px solid black;
}
<div id="test"></div>
推荐阅读
- perl - Perl - 模板合金和模板工具包数组参考
- c# - asp.net 团队项目显示缺少程序集引用和其他错误
- c - 如何获取目录 smb libcurl 中的文件列表?
- r - 使用 knitr 有条件地插入 Child
- auth0 - Auth0如何以用户名发送电子邮件
- php - 使用 vim 有效地重新格式化关联数组
- android - BufferedWriter 在一段时间后停止写入
- javascript - 当用户在文档上移动手指时移动图像
- java - 由于未找到视图而导致应用程序崩溃
- android - MediaStore.Images.Media.insertImage 不会保存图像