HTML
with SVG onclick issue

Question

I have a parent div with child object tag that contains my svg.

I'm trying to capture the clicks on my image but it doesn't work.

In the sample code snippet, the alert is shown only when one click's outside the displayed svg.

HTML:

<div class="calendarWidget" onclick="alert('test');">
    <span>
        <object  onclick="alert('test1');" data="https://www.multiservicetolls.com/wp-content/uploads/revslider/assets/svg/busy-icons-svg/folder-private.svg" type="image/svg+xml"></object>
    </span>
</div>

CSS:

.calendarWidget {
  position: fixed;
  max-width: 200px;
  width: 200px;
  right: 20px;
  bottom: 20px;
  background-color:green;
  z-index: 1;
}

JSFiddle

Due to my requirement, I can't write the script code within the svg.

yes, when use clicks on the svg image i need to fetch data using ajax and display in a bootstrap modal. — usr30911, Dec 03 '18 at 15:53
https://stackoverflow.com/questions/25916403/how-to-bind-click-event-to-object-tag — Dirk, Dec 03 '18 at 16:08
The reason I'm using an object instead of an tag is because the js within the svg doesn't execute in the tag — usr30911, Dec 04 '18 at 10:40

score 1 · Accepted Answer · answered Dec 03 '18 at 17:35

Probably the easiest route is to keep the handler on the div, and set the browser to ignore mouse events on the svg with the css pointer-events: none;. Run the snippet below to see it work (I moved the svg to the top left for the sake of this demo).

.calendarWidget {
  position: fixed;
  max-width: 200px;
  width: 200px;
  left: 20px;
  top: 20px;
  background-color:green;
  z-index: 1;
}
.ignoreMouse{
  pointer-events: none;
}

<div class="calendarWidget" onclick="alert('test');">
  <span>
    <object class="ignoreMouse" data="https://www.multiservicetolls.com/wp-content/uploads/revslider/assets/svg/busy-icons-svg/folder-private.svg" type="image/svg+xml"></object>
   </span>
</div>

HTML with SVG onclick issue

1 Answers1

HTML
with SVG onclick issue