z-index = -1時，在畫布元素中獲取鼠標位置

Question

這似乎是一個簡單的問題。我有一個使用Processing.js編寫的畫布應用程序，我希望它出現在網頁的背景中。要做到這一點，我有以下css：

#canvas-back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
} 

其中canvas-back是包含實際畫布的div的id。畫布本身被設置爲具有html body元素的寬度和高度。這對我來說是正確的（背景中的畫布，在我的html內容下面），但我不能再捕獲變量mouseX和mouseY（process.js用來獲得鼠標座標）。

我該如何解決這個問題？這是一個不同的CSS的問題，還是有另一種方式來獲得processing.js中的鼠標座標？謝謝。

Answer 1

想象我會發布我的解決方案，以防萬一任何人有同樣的問題。由於我使用的是jquery，我繼續並將新變量jmouseX和jmouseY設置爲鼠標位置。

jQuery(document).ready(function(){ 
    $(document).mousemove(function(e){ 
     jmouseX = e.pageX; 
     jmouseY = e.pageY; 
    }); 
}) 

然後每當我需要mouseX或mouseY的在我的processingjs程序，我只是用jmouseX和jmouseY。

Answer 2

那麼，由於您將z-index更改爲-1，並且您的身體具有z-index auto，在這種情況下您可以將其視爲0，因此您將無法在畫布上註冊任何點擊，因爲它在身體下面。你的身體獲得所有點擊等。在這種情況下，您必須在身體上註冊鼠標事件。

如果你必須點擊畫布，我建議的唯一的事情就是讓它成爲z-index = 1並使其完全透明。但在這種情況下，您將無法點擊正文中的任何元素，例如按鈕，鏈接和文本框。否則，您將不得不捕獲正文上的事件，並手動將協調器提交到正在使用的庫中。