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并使其完全透明。但在这种情况下，您将无法点击正文中的任何元素，例如按钮，链接和文本框。否则，您将不得不捕获正文上的事件，并手动将协调器提交到正在使用的库中。