HTML object is blocking eventlistener

Question

I have imported a svg as an object in HTML:

  <object data="mySVG.svg" type="image/svg+xml" id="circle">
    <img src="mySVG.svg" />
  </object>

and I am trying to set an eventlistener on the whole page:

window.addEventListener('click', function(){
   alert('Hello')
})

The problem is that the object blocks the eventlistener and when the user clicks on the image the alert is not fired. But when the user clicks anywhere else or over other elements, the alert is fired. How can I make it so the object is acting as the other elements and doesn't block the eventlistener?

I tried wait after the object is beaing loaded and then set the eventlistener but it didn't work.

If I import the SVG directly into HTML with svg tag it works, but the svg is quit big and it makes the HTML code really messy. I can't use the img tag either becuase I am also interacting with parts of the SVG with JS later.

As it can be seen in this codepen I've made: https://codepen.io/Dimertuper/pen/rNJoLrK (When you click outside the image it triggers, inside the image it doesn't)

Is there an event listener on the object that calls `event.stopPropagation()`? — Barmar, Jun 12 '22 at 17:56
I can't reproduce the issue you are talking about. Please add a working example where this is happening — enxaneta, Jun 12 '22 at 18:31
I've added a codepen( https://codepen.io/Dimertuper/pen/rNJoLrK) link — Filip, Jun 12 '22 at 20:06
Is there a reason why there's an `` with a SVG nested within an ` — zer00ne, Jun 12 '22 at 22:44

LTFoReal · Answer 1 · 2022-06-12T20:43:15.803

0

Per OP's requirements -

Needs to be able to click on window/document and receive the alert message even when clicking on the HTML object tag.

We can do this by removing the object tag as a clickable element with CSS pointer-events: none;.

object {
   pointer-events: none;
}

https://codepen.io/LTFoReal/pen/NWyerZg?editors=1111

edited Jun 12 '22 at 20:43

answered Jun 12 '22 at 18:06

LTFoReal

377
5
20

The problem is that I need the event listener on the window. And even if I run your code it doesn't alert after the object is clicked. – Filip Jun 12 '22 at 18:18
ok sorry, I rebuilt the codepen to be more like your code. I'm not seeing the issue with the SVG blocking the alert - this could possibly be a browser issue. I'm using chrome. Maybe other code that isn't presented here could be blocking the click (check z-indexes maybe?). – LTFoReal Jun 12 '22 at 19:07
Thank you but still, your example is working because you are loading a img tag but if you do it with the object as here: https://codepen.io/Dimertuper/pen/rNJoLrK It no longer works. – Filip Jun 12 '22 at 20:02
quickest solution I can come up with is to remove it as a clickable element by using CSS `pointer-events: none;` . This allows the items behind it (in this case the document or window) to be accessible. https://codepen.io/LTFoReal/pen/NWyerZg?editors=1111 – LTFoReal Jun 12 '22 at 20:37

score 0 · Answer 2 · answered Jun 12 '22 at 21:58

This link has work around. Using a transparent div to cover object image, or directly use svg image instead.

I checked the specification of object element. It's for embeded external content usage. So it has ability to load a full document, your case is load as image. The available property to do event binding for this element is contentDocument or getSvgDocument(). Both are null under your case, as it's loaded as svg image.

document.getElementsByTagName("object")[0].contentDocument

Check this link for detail. Hope this helps you.

score 0 · Accepted Answer · answered Jun 13 '22 at 02:34

Your <object> acts like an <iframe>, just like we wouldn't want any website to be able to embed our bank website in an iframe and see where we clicked, the <object> has the same "protection".
Even if the page are same-origin and can talk to each other, by default they won't receive any events from the other one.

But anyway what you probably want is to make the SVG document react to these events. For this, add the event listeners on that document directly.

// Wait for the <object> to be loaded
window.addEventListener("load", (evt) => {
  const objEl = document.querySelector("object");
  const svgDoc = objEl.getSVGDocument();
  // Now you have access to the SVG document
  // you can add event listeners to it as you wish
  svgDoc.addEventListener("click", (evt) => {
    console.log("clicked on", evt.target.outerHTML);
  });
});

Unfortunately StackSnippets's null-origined iframes won't allow us to make live demos, so here is one on JSFiddle.

But beware the <object> element isn't gathering much love from implementers and spec authors these days and it may get removed from the standards at some point in the future.
So instead, you may prefer to actually use an <iframe> directly. Moreover since here we would access the loaded document, we can do the one thing that <object> can do and <iframe> can't: auto-resizing to the image content.
For this, when we get our SVG document, we grab its documentElement's BBox and set our <iframe>'s width and height attributes to the BBox's ones.

// Wait for the <iframe> to be loaded
window.addEventListener("load", (evt) => {
  const frameEl = document.querySelector("iframe");
  const svgDoc  = frameEl.getSVGDocument();

  // Resize the iframe to its content's size
  const bbox = svgDoc.documentElement.getBBox();
  frameEl.width  = bbox.width;
  frameEl.height = bbox.height;

  svgDoc.addEventListener("click", (evt) => {
    console.log("clicked on", evt.target.outerHTML);
  });
});

Once again as a JSFiddle.

HTML object is blocking eventlistener

3 Answers3