CODEWITHSUNDEEP
javascripthighchartshighmaps
João Menighin
João Menighin

Reputation: 3225

Pass event from overlayed div to Highmaps

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.

Upvotes: 0

Views: 73

Answers (1)

Métoule
Métoule

Reputation: 14502

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.

Upvotes: 1

Related Questions