如何在Javascript中“抛出” mouseEvent？

Question

I have an SVG with overlapping elements, absolutely positioned. The elements are contained in layers (using the SVG g ) tag, and so may not always have a common parent.

In D3, elements can respond to click events that they catch. However, overlapping elements prevent the bottom element from catching any click events. (Due to the design of my application, I can't change their DOM order arbitrarily - it matters.) I'd like to know if there's a way to pass the click event through an element while preserving drag events - almost like "throwing" the event, if possible.

Due to the fact that I still need drag events and other pointer events, I can't use the "pointer-events: none" property. Additionally, since these elements may not have a common ancestor, I can't really loop through elements in that manner.

My desired behavior is a toggle - clicking on a shape will call the shape's click handler, and select that shape. Clicking a selected shape (if it overlaps another shape) will call the selected shape's click handler, which will "throw" the click event so that it will pass through to the underlying element. (Maybe using something like, say, d3.event.throw or, like, return d3.event , or an idea like that).

Is this possible?

Answer 1

The click event is handled by the element's click event handler. So everything you would like to do, is to call teh underlying element's click event handler. But if you also wanna pass the click coordinates of the overlying element to the underlying element's click event handler, you have to pass them (coordinates)/it (event) evidente:

overlyingElement.onclick=function(e){
    var event=e||window.event;
    underlyingElement.click(event);
}

Never tested, but

I hope it will work okay and in IE too.

Answer 2

Does that mean that you want to select all the elements under this element on the click? I am not sure why you would want to do that, but then this is what you are looking for: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

The basic idea is:

1. Receive mouseevent
2. Temporarily set display: none on the present element.
3. Determine which element lies under the present element using document.elementFromPoint , which works in Firefox , IE , and WebKit as well now.
4. Set display back to what it was on the element.
5. dispatch the event on the element under it.
6. Make sure that this does not lead to infinite loops by setting flags on the event or other global flags.

This works for one level of depth because elementFromPoint would return the top level element after the second element tries to do the same thing. If you want to go deeper in the element stack, then you can actually set display property back after all the lower elements have received the event via callbacks set on the event you forward or some other global mechanism.