how to run function if iframe is clicked

Question

Like to know if there is a way to run function if iframe is click on

 <iframe
    src="http://localhost:3001/collections/simple/title1/index.html"
    onclick={()=> alert('You click the iframe')}
 </iframe>

Answer 1

Figured a hack to do this task. Just created a transparent div overlay of the iframe. the div have the onclick event

             <div
              id="overlay"
              onClick={() => alert("hello")}
              style={{
                position: "fixed",
                display: "block",
                width: "100%",
                height: "100%",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                zIndex: 2,
                cursor: "pointer",
              }}
            ></div>
            <iframe
              src="http://example.com"
              style={{
                height: 80,
                width: 200,
                border: "none",
              }}
                    </iframe>

Answer 2

Bubbling is specced to happen only through a single document tree. The iframe is a separate document tree, and so events that bubble through its tree terminate at the root of the iframe’s document and do not travel across the boundary into the host document.

and if parent page is same domain, maybe u can see this solution : Detect mousemove when over an iframe?