Pass event from overlayed div to Highmaps

Question

I'm using Highmaps to show a simple map and over it I have another div with a component that draws things on top of the map (this has to be done this way, I cannot draw everything inside Highmaps, unfortunely).

Now I would like to have some interation with the map, although it is below my div. I would like to know if there is a way to trigger the click, hover, etc. events on the map when I click on the div on top of it.

I have searched Highmaps docs trying to find a method a-like trigger(ev, x, y) but there seems to be none. Then I tried a pure javascript solution using MouseEvent() and dispatchEvent() on the Map DOM, but it also didn't work.

I have set up a simple fiddle with what I want to work: http://jsfiddle.net/k11yfz58/1/

If we coment the #overlay div, we get an alert when we click in a state. I want the same behavior but clicking on the overlay div, is that possible?

Thanks!

EDIT

It was suggested to use the pointer-events CSS property for this. That does not solve my problem because I also need the events to be triggered on the #overlay div.

Highcharts uses not only dom events but also custom events - those events can be dispatched by Highcharts.fireEvent or Point.prototype.firePointEvent - see the example jsfiddle.net/2u400kp9. What you try to do - manually firing events - might be very hard to achieve. I think you should reconsider putting that overlay on the chart - drawing additional/custom items on the charts seems to be a much cleaner way to go. — morganfree
Unfortunely drawing inside highmaps is not an option. The div on top of it actually holds another complex graphical component that uses canvas. For now I will work on a functionality to hide the div on top through a button when the user wants to interact with the map, but Im still open to ideas on how to achieve the desirable behavior of passing the events. — João Menighin

Métoule Métoule · Accepted Answer · 2018-03-07T15:13:15

You can add this to your css:

#overlay {
    pointer-events: none;
}

From MDN:

The pointer-events CSS property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

and the none value:

none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

What this means is that your overlay element is "invisible" to mouse events, and thus mouse events occur on the div below.

Pass event from overlayed div to Highmaps

1 Answers