создание холста регистр мыши двигаться с div над ним

Question

У меня есть элемент <canvas>, который охватывает ширину и высоту моей веб-страницы, как фон. Он имеет интерактивные элементы, которые полагаются на координаты мыши. Когда холст находился в собственном блоке (т. Е. Ничего более), интерактивные элементы работали нормально. Но теперь, когда у него есть divs, он не захватывает никаких взаимодействий с мышью.

Ниже представлен код javascript для mousemove. Почему элементы на вершине влияют на то, что они собирают координаты 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; 
     }  
     ..... 
     } 

Answer 1

Решил проблему с этим кодом, которую я нашел из другого ответа 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 (в дополнение ко всем другим браузерам)

Answer 2

Если вам не нужны топ-дивы, чтобы быть в курсе мыши затем установить их CSS pointer-events:none; и события мыши будут фильтровать вниз к холсту под ним. Пользователю нужны чувствительные кнопки, расположенные над холстом.

Если верхние divs должны реагировать на события мыши, возможно, вам придется прослушивать события мыши в окне и преобразовывать их в координаты холста, на которые может реагировать ваше приложение.

Вы можете прослушать mousemove событий на window и получить все ходы - даже при использовании элементов с кнопками. Также слушайте mouseout событий на window. Поскольку холст охватывает окно, вы знаете, что mouseout происходит, когда mouseevent.clientX & mouseevent.clientY сообщает, что координаты находятся за окном