Make an element visible to the user, but invisible to events

Question

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

At the moment, I have a parent <div> , with an absolutely positioned child <div> inside it, and I track the coordinates of the location of the mouse pointer relative to the element above which your mouse is located.

At the moment, when I hover over my child <div> s, I get the location of the mouse relative to them, but I want the coordinates to refer to the parent <div> , even when the mouse is over the children.

So I basically want the children to be visible but transparent to mousemove, so I want the mousemove to go directly to the parent.

How can I do it? Perhaps I need to somehow make the parent of the <div> underground, but still have a child <div> display? or make a transparent overlay <div> only to get the coordinates of the mouse?

Answer 1

Well, I developed a way that I can ignore children when I click on them.

When getting the event target, I can simply change the target to parentNode if the target class name matches something:

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

Answer 2

You can make an element "transparent" to events by setting its pointer-events CSS property to none . For instance:

 <div><!--container--> <div style="pointer-events: none"><!--inner div; will not respond to mouse clicks--> </div> </div> 

Answer 3

If you put event handlers in the parent div, that will be what gets the events when they bubble. As for the positioning issue, it can make your life easier so that your parent div is position: relative . As far as I know, the mouse coordinates in the event are always relative to the window, so you still have to do the math. I'm really dumb and I was able to figure this out in the past through a trial version and an error :)

Answer 4

you use event.target (srcElement) in your code, just get rid of it and replace it with the appropriate div.