キャンバスを登録してdivを使ってマウスを移動させる

Question

私のウェブページの幅と高さに渡って、背景のように<canvas>要素があります。マウス座標に依存するインタラクティブな要素があります。キャンバスが自分のブロック（つまり、何もない）に入っていれば、インタラクティブな要素はうまく機能しました。しかし、今ではそれ以上のdivを持っているので、それはマウスの相互作用のいずれかを拾っていない。

以下は、mousemove用のjavascriptコードです。なぜ上の項目がマウスのxy座標をピックアップするのに影響し、どうすれば修正できますか？あなたがマウスを認識するトップdivを必要としない場合

var mouse = {x:-100,y:-100}; 
var mouseOnScreen = false; 

canvas.addEventListener('mousemove', MouseMove, false); 
canvas.addEventListener('mouseout', MouseOut, false); 

var MouseMove = function(e) { 
    if (e.layerX || e.layerX == 0) { 
     //Reset particle positions 
     mouseOnScreen = true; 


     mouse.x = e.layerX - canvas.offsetLeft; 
     mouse.y = e.layerY - canvas.offsetTop; 
    } 
} 

var MouseOut = function(e) { 
    mouseOnScreen = false; 
    mouse.x = -100; 
    mouse.y = -100; 
} 

    var update = function(){ 
    var i, dx, dy, sqrDist, scale; 
    //...... this chunk is the only part of the function that references the mouse 
     dx = parts[i].x - mouse.x; 
     dy = parts[i].y - mouse.y; 
     sqrDist = Math.sqrt(dx*dx + dy*dy); 

     if (sqrDist < 20){ 
      parts[i].r = true; 
     }  
     ..... 
     } 

Answer 1

このコードの問題を解決しました。

function simulate(e) { 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("mousemove", true, true, window, 
    0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null); 
     canvas.dispatchEvent(evt); 
     console.log("Emulated."); 
    } 

    $("body > section, body > header").each(function(){ 
     this.addEventListener("mousemove", simulate); 
    }); 

また、メモとして。

Answer 2

と、その下のキャンバスに絞り込むう彼らのCSS pointer-events:none;とマウスイベントを設定します。 質問者はキャンバス上に配置された応答ボタンを必要とします。

トップのdivがマウスイベントに応答する必要がない場合は、ウィンドウ上のマウスイベントをリッスンし、キャンバスにそれらのアプリが応答できることを座標変換する必要があります。

windowでmousemoveイベントをリッスンして、ボタン要素を超えていてもすべての動きを得ることができます。 windowのmouseoutイベントも聞きます。キャンバスがウィンドウにまたがっているので、mouseevent.clientXが表示されます。mouseevent.clientX & mouseevent.clientYレポート座標がウィンドウ外にあることを報告します。