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

Replay

Category: javascript Time: 2016-07-29 Views: 0

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.201 (s). 12 q(s)