JQuery sends mouse dots down the z axis

Question

Is it possible to send a mousevent along the z axis? For example, an element was absolutely positioned on the site over another element. I would like the element below to receive a mouseover event, even if it blocks it, and even though they are completely unrelated (parent / child / sibling relationships) continue.

This can happen on a large number of elements on the site that I create, and I would like to use a general approach to this problem, without providing some additional JS functions for every element that has a chance of this ..

Answer 1

First approach

Listen to the mouse event above the item on the top and run it below.

$('#thingOnTop').mouseenter(function(){ $('#thingUnderneath').mouseenter(); }); 

This solution does not take into account your requirement for a common solution for all elements where this problem may occur. It will also not be entirely accurate if the item on top is not exactly the same position and size as the item below.

Second approach

Use the CSS pointer-events property. This will allow mouse events to go through things, but they are not supported in older browsers:

 .thingsOnTop{ pointer-events: none; } 

Also note that this will make the vertex never the top of the mouse event, and not in the first solution, where it will start the handler for the thing above and something below.

JoshNaro Fourth Approach (developed)

I was just about to add another approach when Josh beat me up. According to him, you can listen to the event on the top element, and then programmatically find out what other elements are under this element for the event coordinates X and Y.

HTML:

 <div class="thingThatCouldBeOnTop"></div> <div class="thingThatCouldBeUnderneath"></div> 

JS:

 $('.thingThatCouldBeOnTop').mouseenter(function(e){ $('.thingThatCouldBeUnderneath').filter(function(){ $this = $(this); var offset = $this.offset(); var height = $this.outerHeight(); var width = $this.outerWidth(); return offset.top < e.pageY && offset.left < e.pageX && (height + offset.top) > e.pageY && (width + offset.left) > e.pageX; }).mouseenter(); }); $('.thingThatCouldBeUnderneath').mouseenter(function(){ alert('do something more useful'); }); 

Note: This is terribly inefficient. Reducing the set of searchable elements for objects with a specific class helps a little (i.e., Do $('.thingThatCouldBeUnderneath') , not $('*') ), but that means you need to add this class to every element that may be under another that you want to handle events for with the mouse. I believe that it is the size calculation that causes most of the delay. With many potentially “under” elements on the page, this may be too slow.

Here is a working example .

Answer 2

I don’t think that you will find a relatively simple solution that will completely satisfy your needs, if perhaps the Spycho event pointer trick that you get there is not mentioned. However, there are several more inelegant several global approaches that you could take:

Third approach

Create an expression element that is in the same position as the mouse event that wants to return the element back, except for the visibility of the "hidden" and higher z-index. Keep the mouse events transferred to the mimicked element.

Fourth approach

• Get mouse event relative to window
• Iterates through each object to determine which element you want to apply.
• Perform action