使帆布註冊DIV鼠標移過它

我有一個<canvas>元素跨越我的網頁的寬度和高度，像一個背景。它具有依賴於鼠標座標的交互式元素。當畫布在它自己的塊中時（即沒有任何畫布），交互元素工作正常。但是現在它已經有了divs，它並沒有採用任何鼠標交互。使帆布註冊DIV鼠標移過它

下面是我對鼠標移動的東西JavaScript代碼。爲什麼頂部的物品會影響它拾取鼠標的xy座標，我該如何解決它？

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; 
     }  
     ..... 
     }

來源

2016-07-29 Acoustic77

解決了這個問題，我從另一個SO找到的答案找到了答案，我修改了一下。

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); 
    });

另外，作爲一個附註。改變原來layerX和layerY小鼠代碼OFFSETX和OFFSETY在Firefox中工作（除了所有其他瀏覽器）

來源

2016-08-01 21:48:02 Acoustic77

~~如果您不需要頂部的div是鼠標感知然後設置其CSS pointer-events:none;和鼠標事件將下降到過濾你的畫布下方。~~ 提問者需要響應按鈕放置在畫布上。

如果頂部的div確實需要響應鼠標事件，你可能需要監聽窗口鼠標事件和轉換那些畫布座標，你的應用程序可以迴應。

您可以偵聽在windowmousemove事件，並得到所有動作 - 當即使在按鈕元素。另請收聽window上的mouseout事件。由於畫布跨越窗口，因此當mouseevent.clientX發生鼠標移動時，mouseevent.clientX會發生mouseevent.clientY報告座標超出窗口的範圍

來源

2016-07-30 00:54:12 markE

是啊，我需要點擊一個按鈕或兩個在頂部的div，所以這是行不通的。雖然很高興知道！任何你知道如何做鼠標事件到畫布座標的機會嗎？ – Acoustic77

也許使用'fillRect'和'fillText'在畫布上繪製按鈕，然後在使用按鈕矩形中單擊畫布時響應？ – markE

由於帆布不需要比鼠標的位置等進行交互，我寧願它只是跟蹤比重新設計我在它的div鼠標位置。該div的要複雜得多 – Acoustic77

使帆布註冊DIV鼠標移過它

回答

相關問題