0

I have a page which has an iframe (containing an interactive map) and a canvas positioned over it by z-depth, to draw as if into the map. So neither are a parent of the other, they're just located in the same place. Both the canvas and the map need to be able to handle the same click events: the map (for interaction with it), and the canvas (to set timeouts for map status changes, for selecting objects, etc).

I'm having trouble figuring out how one is supposed to get all events to flow from one to the next. I tried making one a parent of the other (such as putting the map iframe inside the canvas) so it could flow up the DOM, but then the map doesn't draw. I found this code for using a dispatchEvent to forward copies of events:

Is it possible to selectively pass DOM events through overlapping canvases?

But it seems needlessly complicated, would need to be implemented for every event, and more to the point, didn't work when I tried it.

Surely there's something easy I'm missing... thoughts?

KarenRei
  • 589
  • 6
  • 13
  • I don't think you'll find *something easy* no... Moreover when your scenario is even more complicated than the one you linked to. You are using an `iframe`. So once in it, the event won't bubble to the main document. And to be able to pass a copy of the event, you'd have to get your iframed doc on the same origin. If all of this is met, then you could try the same method, after you set all the x-y pos relatives to the iframe's pos and called `iframe.contentDocument.getElementFromPoint(x,y).dispatchEvent(copy)`. No, it's not an easy task. Yes it can be done... – Kaiido Oct 20 '17 at 05:02
  • The canvas is above the iframe; won't it get the events first? So why would it matter if events don't bubble out of the iframe? They do have the same origin (exact same dimensions, one overlaid right on top of the other). – KarenRei Oct 20 '17 at 20:14
  • Having your iframe below might help, a little. But your iframe's document will have its 0 origin set at the top left position of you iframe element, not of your main document, so you will still have to update all x-y positions of the copy event. For the event, it doesn't matter if your framed doc is of same origin, an Event can not fire across different documents. You will have to use something like in the answer you linked to in order to copy the Event and dispatch it again on the iframe's doc. But if they are of same origin, you can then do it. – Kaiido Oct 21 '17 at 01:37
  • I started a new question here (https://stackoverflow.com/questions/46859466/canvas-handling-event-then-passing-through-to-iframe) because I've gotten new information since then. The problem is, sending the event to the iframe doesn't work. Because it's not the iframe itself that needs the event, it's some child deep inside, and DOM events propagate down, not up (at least I assume that's why the map does not respond to events, but I still see the events go off if I add a handler to the iframe itself). Approaches with elementFromPoint were dead ends as well. – KarenRei Oct 21 '17 at 02:27

0 Answers0