在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上的鼠標位置明顯不同，因此滾動幫助程序不再與鼠標的位置重疊。我如何修改上面的代碼？

來源

2016-08-24 Jacopo Terrinoni

它們看起來就像它們的示例頁面上的所有示例都包含在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將處理其餘部分。

希望這會有所幫助！

來源

2016-08-24 14:26:29 Turk

提示：停止使用jQuery。 – Pawel

謝謝你的回答！鼠標的座標是相對於整個頁面，而不僅僅是我想要的div元素。 –

您正在使用畫布顯示觸發鼠標正確的東西？我給你的例子引用了整個文檔，是的。但是，您可以將引用對象更改爲div或canvas或任何顯示您的信息的對象。您甚至可以通過CSS樣式將其更進一步，並將其位置設置爲相對於obj（0，0）的左上角，並且event.pageX/Y將返回相應於該角落的那些座標。 – Turk

如果你想讓你的頁面上的鼠標光標的全球地位，你應該只是使用頁面座標如下：

event.pageX 
event.pageY

來源

2016-08-24 14:26:20 Christoph

在HTML頁面上的鼠標座標

回答

相關問題