在 div 内获取鼠标位置？

Question

可能是重复问题：
如何获取画布中鼠标的位置？
如何在canvas中使用JavaScript获取鼠标位置？

我该如何获取一个固定大小但具有自动边距的canvas内鼠标的位置？

我不能让其位置固定，也不能只使用页面上的常规鼠标位置。

这段代码完美地解决了问题：

mouseX = e.pageX - div.offsetLeft;
mouseY = e.pageY - div.offsetTop;

- Max Hudson

---

谷歌是你的朋友 - http://api.jquery.com/mousemove/ - Jay Blanchard

如果您有特定的问题需要检查，请在jsfiddle或类似网站上发布一些示例代码。 - oomlaut

这个问题在其他地方得到了回答吗？[/questions/4848310/getting-mouse-position-with-javascript-within-canvas?rq=1] - oomlaut

请不要删除重复的链接；审核人员仍然想看到您的问题被关闭的原因。 - Martijn Pieters

Answer 1

使用jQuery：

var divPos = {};
var offset = $("#divid").offset();
$(document).mousemove(function(e){
    divPos = {
        left: e.pageX - offset.left,
        top: e.pageY - offset.top
    };
});

- PitaJ

---

不使用jQuery怎么样？ - bryan

@bryan - 我相信没有使用jQuery也可以完成，但这会变得非常复杂。 - PitaJ

MDN表示pageX不是标准属性，不应该使用。https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/pageX 例如，在使用foreignObject时，我遇到了一些问题。 - Charles

@charles - jQuery事件对象的pageXå’ŒpageY属性是标准化的。 - PitaJ

哦，是一个jQuery事件，抱歉。 - Charles

使用 getBoundingClientRect 和 addEventListener 而不是 jQuery，你就不需要使用 jQuery 了：var offset = document.querySelector('#divid').getBoundingClientRect(); document.addEventListener('mousemove', function(e) { var pos = { left: e.pageX - offset.left, top: e.pageY - offset.top } }...虽未经过测试，但应该可行。 - chitzui

Answer 2

使用event.layerX和event.layerY来获取鼠标相对于当前元素的位置。

$('#canvas').mousemove(function(e){
  var mousePos = {'x': e.layerX, 'y': e.layerY};
});

- dimusic

---

这是一个很酷的功能，可惜它已经被弃用了。 - blex

@blex 它不是已弃用，而是非标准的：https://developer.mozilla.org/zh-CN/docs/Web/API/UIEvent/layerX - DevAntoine

还应该提到的是，这可能会导致一些严重的问题，因为通过简单地转动手腕就可以改变层的定义，从而改变layerX和layerY。 - Joseph Casey

来自MDN: "此功能是非标准的，没有遵循标准轨道。不要在面向Web的生产站点上使用它：它不适用于每个用户。" - tim-phillips

Answer 3

摘自jQuery网站：Jquery教程网站

$(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 

注意：修正语法

- Ian Ellis

---

为什么这个被标记了？ - ness-EE

因为 pageX 和 pageY 不是相对于容器的。 - dmackerman