Is there any way to disable some DOM element from capturing mouse events?

javascript css mouseevent
tester picture tester · Nov 29, 2010 · Viewed 18.7k times · Source

I have an element which is on top of another element. I want to capture the mouseover event with the bottom element, but when the mouse cursor is over the top element the bottom element is not receiving the mouseover events.

Is there any way to disable the top element from receiving mouse events?

Answer

Ryan Rapp picture Ryan Rapp · May 4, 2012

Elements can be easily disabled from receiving mouse events using, in your example, the following CSS:

#region2 {
    pointer-events: none;
}

For more discussion, see this SO post.

Related questions

How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

How can you achieve either a hover event or active event in ReactJS when you do inline styling? I've found that the onMouseEnter, onMouseLeave approach is buggy, so hoping there is another way to do it. Specifically, if you mouse …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More