Acoustic77 Acoustic77 - 1 year ago 94
jQuery Question

making canvas register mouse move with div over it

I have a

element that spans the width and height of my webpage, like a background. It has interactive elements that rely on mouse coordinates. When the canvas was in it's own block (i.e. nothing over it) the interactive elements worked fine. But now that it's got divs over it it's not picking up any of the mouse interactions.

Below is my javascript code for the mousemove stuff. Why would items on top affect it picking up mouse xy coordinates, and how do I fix it?

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 Source

Solved the issue with this code I found from another SO answer that I modified a bit.

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

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

Also, as a side note. Changed original layerX and layerY in mouse code to offsetX and offsetY to work in firefox (in addition to all other browsers)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download