HTML页面上的鼠标坐标答案

【问题标题】：Mouse coordinates over HTML pageHTML页面上的鼠标坐标
【发布时间】：2016-12-31 17:42:46
【问题描述】：

我正在尝试使用来自three.js 页面的示例，体素画家之一。在此示例中，鼠标坐标用于移动一个翻转助手，该助手指示单击后将放置框的位置。

mouse.set((event.clientX/window.innerWidth)*2-1, -(event.clientY/window.innerHeight)*2+1);

这段代码计算鼠标在整个页面上的位置。我在页面中添加了其他 div 元素，这样 webGL 画布的总空间量与页面中的总空间量不同，webGL 画布的新尺寸是总高度的 95% 和 85%总宽度。

现在，鼠标在我的 webGL 画布上的位置明显不同，因此翻转助手不再与鼠标的位置重叠。我该如何修改上面的代码？

【问题讨论】：

在他们的示例页面上，所有示例都包含在 iframe 中，因此 window.innerWidth / window.innerHeight 指的是 iframe 的高度和宽度

标签： javascript html canvas three.js

【解决方案1】：

您可以使用 jQuery 来检测鼠标位置，该位置适用于传递给它的任何 jQuery 对象。

$(function() {
  var xCoord, yCoord;
  $(document).on("mousemove", function(event) {
    xCoord = event.pageX;
    yCoord = event.pageY;
    console.log("x: "+ xCoord+ ", y: "+ yCoord);
  } );
} );

只需将 jQuery 选择器更改为您的画布，然后 jQuery 将处理其余部分。

希望这会有所帮助！

【讨论】：

提示：停止使用 jQuery。
感谢您的回答！鼠标的坐标是相对于整个页面的，而不仅仅是我想要的 div 元素。
您正在使用画布来显示触发鼠标悬停的内容，对吗？我给你的例子引用了整个文档，是的。但是，您可以将引用对象更改为您的 div 或 canvas 或任何显示您的信息的对象。您甚至可以通过 CSS 样式将其更进一步，并将其位置设置为相对于 obj (0, 0) 的左上角，并且 event.pageX/Y 将返回与该角相对应的坐标。

【解决方案2】：

如果你想要鼠标光标在页面上的全局位置，你应该像这样使用页面坐标：

event.pageX
event.pageY

【讨论】：