当z-index = -1时，在canvas元素中获取鼠标位置

Question

这似乎是一个简单的问题。我有一个使用Processing.js编写的画布应用程序，我希望它出现在网页的背景中。为了实现这一点，我有以下css：

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

其中canvas-back是包含实际画布的div的id。画布本身设置为具有html body元素的宽度和高度。这对我来说正确呈现（背景中的画布，在我的html内容之下），但我无法再捕获变量mouseX和mouseY（processing.js使用什么来获取鼠标坐标）。

如何解决此问题？这是一个不同的CSS的问题还是有另一种方法来处理processing.js中的鼠标坐标？感谢。

Answer 1

如果有人遇到同样的问题，我会发布我的解决方案。由于我使用的是jquery，我继续将新变量jmouseX和jmouseY设置为鼠标位置。

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

然后每当我在processingjs app中需要mouseX或mouseY时，我只使用jmouseX和jmouseY。

Answer 2

好吧，既然你把z-index更改为-1并且你的身体有z-index auto，在这种情况下你可以认为是0，那么你将无法在画布上注册任何点击，因为它是身下。你的身体得到所有的点击，等等。在这种情况下，您必须在身体上注册鼠标事件。

如果你必须在画布上获得点击，我唯一可以建议的是使它成为z-index = 1并使其完全透明。但在这种情况下，您将无法单击正文中的任何元素，如按钮，链接和文本框。否则，您将必须捕获正文上的事件并手动将协调提交到您正在使用的库中。