HTML <div> 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.

Answer 1

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>