Clicking on top of iframes

Can I click on top of an iframe, and get the event outside?

by David Iglesias

HTML

<p id="output">Last click: x: ?, y: ?</p>
<div id="iframe-wrapper">
  <iframe src="https://www.dart.dev"></iframe>
  <div id="interceptor"></div>
</div>

CSS

iframe {
  width: 320px;
  height: 200px;
  border: none;
}

#iframe-wrapper {
  padding: 40px;
  background-color: black;
  text-align: center;
  position: relative;
}

#interceptor {
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -160px;
  background: red;
  opacity: .6;
  width: 320px;
  height: 200px;
}

JavaScript

const output = document.querySelector('#output');
const button = document.querySelector('#interceptor');

button.addEventListener('click', (ev) => {
//  output.innerText = `Last click: x: ${ev.x}, y: ${ev.y}`;
});

window.addEventListener('click', (ev) => {
  output.innerText = `Last click: x: ${ev.x}, y: ${ev.y}`;
})