Geek Answers Handbook

The document does not capture events raised by the embedded document

I have HTML containing embedded SVG with an object tag. I register event listeners for mousemove in the global document, but when the mouse moves on an element inside the embedded SVG document, the callback registered in the global document for mousemove is not called. Nesting seems to be the problem here, but can't figure out what could be the problem, I thought the SVG document is a child of the global document, and the global document should receive all the events. Can anyone help? Does the global document and the SVG document have no relationship?

+4
source share
1 answer

I tried the following:

<div style="position:relative; background-color:red; height:300px"> <object data="http://upload.wikimedia.org/wikipedia/commons/c/c7/SVG.svg" type="image/svg+xml" height="300" width="400" style="position:absolute;z-index:1;" onclick="console.log('clickSVG');" onmousemove="console.log('moveSVG');" ></object> <div style="height:150px; background-color:blue; z-index:2;" onclick="console.log('clickDIV');" onmousemove="console.log('moveDIV');"></div> </div>

With the idea that a div located above an object can capture events, but that is not the case. I really don't know why; perhaps you should try to create an entire SVG object in JS and directly bind handlers.

Edit: Sorry for digging up an old post, I realized I'm a little late; Hope this can help someone.

0
source

More articles:


All Articles