当 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（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应用程序中需要mouseX或mouseY时，我只需使用jmouseX和jmouseY。

Answer 2

好吧，由于您将 z-index 更改为 -1 并且您的 body 具有 z-index auto（在本例中您可以将其视为 0），因此您将无法在画布上注册任何点击，因为它位于 body 下方。你的身体会受到所有的点击等等。在这种情况下，您必须在主体本身上注册鼠标事件。

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