Javascript 不存在周围元素时跟踪画布中的鼠标位置

我在获取鼠标位置w.r.t画布时遇到问题

有两种情况：

1） 如果画布div周围没有div元素，那么我可以得到鼠标的位置

2） 当画布被包装在

div

中时，则

offsetLeft

和

offsetTop

无法按预期工作

---

是什么导致了这种差异？

您需要一个函数来获取：

并计算光标相对于该点的当前位置：

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

offsetLeft

和

offsetTop

的值与

offsetParent

相关，后者是您的

div

节点。删除

div

时，它们是相对于

主体的，因此没有要减去的偏移量

类似地，
e.pageX
和
e.pageY
给出光标相对于文档的位置。这就是为什么我们从这些值中减去画布的偏移量，以得到真实位置

定位元素的另一种选择是直接使用
e.layerX
和
e.layerY
的值。由于两个原因，该方法不如上述方法可靠：

当事件未在定位元素内发生时，这些值也与整个文档相关
它们不是任何标准的一部分
（和）的副本。@Phrogz是正确的，这已经被问过很多次了。我没有指出这一点，因为每个被引用的帖子都有错误的答案。第一种方法没有抓住要点，第二种方法是错误的，第三种方法不必要地扩展了DOM并重新发明了轮子。因为他们已经接受了答案，我不知道如何在眼球前找到正确的解决方案。这是一个问题。>>不必要地扩展了DOM并重新发明了轮子。@Priya-我指的是@Phrogz给出的第三个链接中的
元素.prototype.leftTopScreen
解决方案，它与我的
findPos
在下面所做的完全一样，但是通过修改
元素
prototype来实现。这通常是个坏主意。请参阅此链接：@Priya-请参阅下面我的答案。唯一的问题是，当您要计算相对于
画布的偏移量时，您正在计算相对于父
div的偏移量。我提供的解决方案应该适用于您。这些坐标是否可以存储在客户端的一个文件中，而该文件在每次会话后都不会被清除？当然。把它们放在饼干或本地存储器中。我喜欢这个对“不是真正问题”的回答在它关闭两周年之际又获得了一次投票。
$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});