1

I have created a div, and within that div, I referenced a SVG image via object (I want to manipulate that SVG image later on...).

<div id="click-me">
   some needless Text
   <object data="some.svg" />
</div>

And then I register some event handlers on the click event:

document.getElementById('click-me').addEventListener('click', function(event) {
    console.log("Click handled");
});

Now the following happens: The registered click handler do work perfectly on the text, but do now work on the SVG image.

Am I doing something in a wrong way? What do I oversee?

Here is the Plunk: http://plnkr.co/edit/TZm7MxSfiwswz01HCwA9?p=info

Lorenz Merdian
  • 722
  • 3
  • 14
  • Does your svg has height and weight? – Legendary Mar 31 '15 at 08:54
  • Yes, it does: `width="500pt"` and `height="600pt"` in this example. – Lorenz Merdian Mar 31 '15 at 08:56
  • Clicks on an embedded svg aren't registered unless you include them in the svg itself. Although with jQuery, you might be able to get it to work with `.contents()`. – Shikkediel Mar 31 '15 at 09:05
  • 1
    If you want the whole SVG drawing to be a single object that you click anywhere on, include it as an image rather than an object. – Robert Longson Mar 31 '15 at 09:09
  • Problem with including it as an image is, that I cannot manipulate it via javascript afterword. – Lorenz Merdian Mar 31 '15 at 09:12
  • Tested `.contents()` but there is no jQuery workaround. – Shikkediel Mar 31 '15 at 09:13
  • Actually, if you click on the TOP LEFT corner of the SVG image the click will be registered. I mean this area: http://prntscr.com/6nm7qg – briosheje Mar 31 '15 at 09:14
  • That's not part of the object though. – Shikkediel Mar 31 '15 at 09:15
  • http://stackoverflow.com/questions/20835768/addeventlistener-on-custom-object Perhaps this might be useful. – briosheje Mar 31 '15 at 09:25
  • I think the plunkr is getting in the way with cross-site errors (or at least for me). Here is an example using Snap, see if this is what you mean. No reason if that works for you, it couldn't be done with just js. http://svg.dabbles.info/snapobject.html – Ian Mar 31 '15 at 09:37
  • That's a huge plugin for a simple image to be honest. My idea would be to put the whole svg inline (` ... `). It will then be clickable and you can access it with JavaScript. If it's considered to be crowding the page source that way you could dynamically add/load it. – Shikkediel Mar 31 '15 at 09:40

1 Answers1

2

As some workaround for this, I've found the CSS rule object { pointer-events: none; } to be working.

But it can be only a workaround, if you don't care which item of object you have clicked on, i.e. you care only about whether it's clicked on.

Lorenz Merdian
  • 722
  • 3
  • 14