Make an element visible to the user but invisible to events

Question

I'm not quite sure how to describe what I'm looking to do, but I'll do my best.

At the moment I have a parent <div>, with absolutely positioned child <div>s within it, and I'm tracking the mouse pointer location coordinates relative to the element your mouse is over.

At the moment, when I mouse over my child <div>s, I get the mouse location relative to them, but I want the coordinates to be relative the the parent <div> even when mousing over the child elements.

So I basically want the child elements to be visible, but transparent to the mousemove, so I want the mousemove to go straight through to the parent element.

How would I do this? Do I maybe need to somehow make the parent <div> be in the forground but still have the child <div>s show through? or make a transparent <div> overlay just to get the mouse coordinates?

Answer 1

If you put your event handlers on the parent div, then it'll be what gets the events as they bubble up. As to the positioning issue, it might make your life easier to make your parent div be position: relative. The mouse coordinates in the event are always relative to the window, as far as I know, so you're going to have to do the math anyway. I'm really dumb and I've been able to figure that out in the past through trial and error :)

Answer 2

you're using event.target (srcElement) in your code, just get rid of that and replace with the div in question.

Answer 3

Okay, I've worked out a way I can ignore the child elements when I mouse over them.

When getting the target of the event I can just change the target to the parentNode if the className of the target matches something:

if (target.className.toLowerCase() === 'ignoreme') { target = target.parentNode; }