Javascript:If a div contain an iframe, then click event on the div doesn't happen

Question

Here is my sample html markup:

<div>
    <iframe></iframe>
</div>

And the iframe size exactly fill the outer div

Then I add event handler to the div click event:

div.addEventListener("click", function () {
    console.log("click");
});

But when I click on the div , nothing happened. It seems the iframe stop the click event bubble？

Why this happened and how can I solve this problem ?

Answer 1

This is most probably because you are clicking on the iframe itself instead of the div (due to the iframe size being exactly the same as the div).

If you want to click on the div instead to trigger some other events/actions, then you can simply put the order of the iframe below the div itself, with something like this in your CSS:

div iframe {
    z-index: -1;
}