JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
  <code>&lt;object&gt;</code> captures click events even if it is an SVG image
</h3>

<p>
  (Unless you carefully position your mouse on the edge of the icons):
</p>
<p>
  This icon will not bring you to Google:
  <a href="https://www.google.com">
    <object type="image/svg+xml" data="https://icons.getbootstrap.com/icons/google.svg">
    </object>
  </a>
</p>

<p>
  This icon will not tell you the time:
  <span id="broken-clock">
    <object type="image/svg+xml" data="https://icons.getbootstrap.com/icons/clock.svg">
    </object>
  </span>
</p>

<p>
  But this icon knows when you click on it (and also tells you the time)
  <span id="nested-event-listener">
    <!-- See content of the SVG below -->
    <object type="text/html" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktbW91c2UtZmlsbCIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICAgIDxwYXRoIGQ9Ik0zIDVhNSA1IDAgMCAxIDEwIDB2NmE1IDUgMCAwIDEtMTAgMFY1em01LjUtMS41YS41LjUgMCAwIDAtMSAwdjJhLjUuNSAwIDAgMCAxIDB2LTJ6IiAvPgogICAgPHNjcmlwdD4KICAgIC8vIDwhW0NEQVRBWwogICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigncGF0aCcpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgKCkgPT4gewogICAgICAgIHdpbmRvdy5wYXJlbnQucG9zdE1lc3NhZ2UoJ1NvbWVvbmUganVzdCB0YXBwZWQgbWUgYW5kIEkgYW0gZ29pbmcgdG8gdGVsbCBteSBwYXJlbnQuJywgJ2h0dHBzOi8vZmlkZGxlLmpzaGVsbC5uZXQnKQogICAgfSkKICAgIC8vIF1dPgogICAgPC9zY3JpcHQ+Cjwvc3ZnPg=="></object>
  </span>
</p>

<p>Current time: <span id="clock-display"></span></p>
<p>Message: <span id="message-display"></span></p>

<!-- Content of the data: SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mouse-fill" viewBox="0 0 16 16">
    <path d="M3 5a5 5 0 0 1 10 0v6a5 5 0 0 1-10 0V5zm5.5-1.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0v-2z" />
    <script>
    // <![CDATA[
    document.querySelector('path').addEventListener('click', () => {
        window.parent.postMessage('Someone just tapped me and I am going...

JavaScript

document.querySelector('#broken-clock')
  .addEventListener('click', () => {
    document.querySelector('#clock-display')
      .innerText = (new Date()).toString() // will not work
  })

window.addEventListener('message', (ev) => {
  document.querySelector('#message-display').innerText = ev.data
  document.querySelector('#clock-display')
      .innerText = (new Date()).toString() // will work
})