Javascript HTML页面上的鼠标坐标

我试图使用three.js页面的一个例子，体素画师一号。在本例中，鼠标坐标用于移动翻转辅助对象，该辅助对象指示单击后将放置框的位置

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

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

---

现在，鼠标在我的webGL canavas上的位置明显不同，因此翻滚辅助对象不再与鼠标位置重叠。如何修改上述代码？

如果您希望在页面上显示鼠标光标的全局位置，则应使用如下页面坐标：

event.pageX
event.pageY

---

如果希望鼠标光标在页面上的全局位置，则应使用如下页面坐标：

event.pageX
event.pageY

---

您可以使用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来检测鼠标位置，该位置可以关闭传递给它的任何jQuery对象

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

只需将jQuery选择器更改为画布，jQuery将处理其余部分

---

希望这有帮助

在他们的示例页面上，所有示例都包装在一个iframe中，因此window.innerWidth/window.innerHeight是指iframe的高度和宽度。在他们的示例页面上，所有示例都包装在一个iframe中，因此window.innerWidth/window.innerHeight是指iframeTip的高度和宽度：停止使用jQuery。谢谢您的回答！鼠标的坐标是相对于整个页面的，而不仅仅是相对于我想要的div元素。您使用的是画布来显示触发鼠标的内容，对吗？我给你的例子引用了整个文档，是的。但是，您可以将引用对象更改为您的div或canvas或显示信息的任何对象。您甚至可以通过CSS样式将其向前推进一步，并将其位置设置为相对位置，从而生成obj（0，0）的左上角和事件。pageX/Y将返回相应于该角的坐标。提示：停止使用jQuery。感谢您的回答！鼠标的坐标是相对于整个页面的，而不仅仅是相对于我想要的div元素。您使用的是画布来显示触发鼠标的内容，对吗？我给你的例子引用了整个文档，是的。但是，您可以将引用对象更改为您的div或canvas或显示信息的任何对象。您甚至可以通过CSS样式将其向前推进一步，并将其位置设置为相对位置，从而生成obj（0，0）的左上角，event.pageX/Y将返回相应于该角的坐标。