问题
Despite searching all evening, I still haven't found a solution to this. I have the following layout in the DOM:
<div class="kort_miðja_úti">
<iframe class="kort_miðja" frameborder="0" width="100%" height="100%" src="...."></iframe>
<canvas class="kort_canvas"></canvas>
</div>
The canvas is in front, acting as a transparent overlayer on an interactive map from a different site. So when there's a mouse event, it gets it first. It needs to do things on the mouse events, then forward them on to the map so the map can handle them as well. And that's where all the trouble starts.
I first set up a debugging event handler in the canvas which forwardings to the iframe, and add a debugging event handler in the iframe. As expected, the canvas gets its first, and then the iframe. Great.
Now I remove the debugging handler on the iframe, as I want the map to do its own thing. I click, the canvas handler goes off, and then... nothing. No map response. Oh, duh, it's going to the iframe itself, not it's contents. The event should really be going to some deep descendent inside that iframe somewhere, and events don't propagate up the DOM.
Okay, so I try to find which one. I'm going to turn off pointer events for the canvas after it gets an event, call document.elementFromPoint on the screenX and screenY, and then reenable pointer events. And... that gives me just the iframe object, not what's inside. Well, that was no help.
So I try, from the iframe, .contentDocument.elementfromPoint. But that gives me a cross-site scripting error.
And all this may be a moot point because I heard that zooming on phones messes up elementFromPoint.
Well, I'm stumped. Is there no way to do this? How can both I and the map handle the mouse events?
来源：https://stackoverflow.com/questions/46859466/canvas-handling-event-then-passing-through-to-iframe