CODEWITHSUNDEEP
javascripthtmlcssxhtmldom-events
Acorn
Acorn

Reputation: 50557

Make an element visible to the user but invisible to events

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 foreground but still have the child <div>s show through? or make a transparent <div> overlay just to get the mouse coordinates?

Upvotes: 5

Views: 2712

Answers (4)

Tom
Tom

Reputation: 5201

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

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

Upvotes: 11

Acorn
Acorn

Reputation: 50557

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

Upvotes: 1

user187291
user187291

Reputation: 53940

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

Upvotes: -1

Pointy
Pointy

Reputation: 413826

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

Upvotes: 0

Related Questions