z-index = -1のときにキャンバス要素でマウスの位置を取得する

Question

これは簡単な問題のようです。 Processing.jsを使用して書いているCanvasアプリケーションがあり、Webページの背景に表示したいと考えています。これを達成するために、私は次のCSSを持っています：

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

Canvas-Backは、実際のキャンバスを含むDIVのIDです。キャンバス自体は、HTMLボディ要素の幅と高さを持つように設定されています。これは私にとって正しくレンダリングされます（HTMLコンテンツの下の背景のキャンバス）が、MousexとMouseyの変数（Processing.jsがマウス座標を取得するために使用する変数）をキャプチャすることはできなくなりました。

この問題を修正するにはどうすればよいですか？それは異なるCSSの問題ですか、それともProcess.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に変更し、体がZ-Index Autoを持っているため、この場合は0と考えることができます。 。あなたの体はすべてのクリックなどを取得します。この場合、体自体にマウスイベントを登録する必要があります。

キャンバスをクリックする必要がある場合、私が提案できるこの唯一のことは、z-index = 1にして完全に透明にすることです。しかし、その場合、ボタン、リンク、テキストボックスなど、ボディにある要素をクリックすることはできません。それ以外の場合は、身体のイベントをキャプチャし、使用しているライブラリにコーディナを手動で提出する必要があります。