javascript - 当 z-index=-1 时获取鼠标在 Canvas 元素中的位置

Question

这似乎是一个简单的问题。我有一个使用 Processing.js 编写的 Canvas 应用程序，我希望它出现在网页的背景中。为此，我有以下 CSS:

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

其中 canvas-back 是包含实际 Canvas 的 div 的 ID。 Canvas 本身设置为具有 html 正文元素的宽度和高度。这为我正确呈现(背景中的 Canvas ，在我的 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。