在HTML页面上的鼠标坐标

问题描述：

我想从three.js页面的体素画家之一使用一个例子。在这个例子中，鼠标坐标被用来移动一个翻转帮助器，该帮助器指示在点击之后框将被放置的位置。在HTML页面上的鼠标坐标

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

这段代码计算鼠标在整个页面上的位置。我在页面中添加了其他div元素，以使webGL画布的总空间量与页面中的空间总量不同，webGL画布的新维度为总高度的95％，而85％的总宽度。

现在，我的webGL canavas上的鼠标位置明显不同，因此滚动帮助程序不再与鼠标的位置重叠。我如何修改上面的代码？

它们看起来就像它们的示例页面上的所有示例都包含在iframe中，所以window.innerWidth/window.innerHeight指向iframe的高度和宽度 –

答

您可以使用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。 – Pawel

谢谢你的回答！鼠标的坐标是相对于整个页面，而不仅仅是我想要的div元素。 –

您正在使用画布显示触发鼠标正确的东西？我给你的例子引用了整个文档，是的。但是，您可以将引用对象更改为div或canvas或任何显示您的信息的对象。您甚至可以通过CSS样式将其更进一步，并将其位置设置为相对于obj（0，0）的左上角，并且event.pageX/Y将返回相应于该角落的那些坐标。 – Turk

答

如果你想让你的页面上的鼠标光标的全球地位，你应该只是使用页面坐标如下：

event.pageX 
event.pageY

在HTML页面上的鼠标坐标

相关推荐