How to trigger click events on a transparent div overlay while also keeping functionality of iframe intact?

Question

I have an embedded iframe in my website that goes to a form on another (third-party) website. What I'd like to do is to run a function every time a user clicks into the iframe while also not preventing the user from using the iframe itself.

Because iframes don't seem to have click handlers, I decided to attempt to overlay a transparent div on top with a click handler while also simultaneously passing clicks through to the iframe underneath.

Here is a Fiddle: https://jsfiddle.net/r3u04fa9/1/

const el = document.getElementById("wrapper")
if (el) {
    el.addEventListener('click', () => {
        console.log("CLICKED")
      })
}

#wrapper {
  //background-color: firebrick;
  position: absolute;
  z-index: 1;
  width: 800px;
  height: 500px;
  pointer-events: none; /* If this is not here, the clicks happen but can't interact with form */
}

<div id="wrapper"></div>
<iframe src="https://www.zillow.com" width=800 height=500></iframe>

With the addition of the pointer-events style, the clicks are able to pass through to the underlying iframe but the click events don't happen. Is there a way for me to achieve both?