Capture click on div surrounding an iframe

by

If the click is in the iframe area, the iframe context handles the click event, it does not bubble up to the iframe parent. So the div will never register the click event at all if it happened in the iframe area.

Furthermore, if the iframe contains a page that does not belong to the same domain as the iframe parent, any interaction is prohibited (re. same origin policy).

When the same origin policy is met, there are a few things you can do, you could call a method in the iframe parent context:

top.parentFunction();

So in the iframe you add an event listener that delegates to the iframe parent (accessible with the top reference.

Propagating events is a lot more complicated, so I’m simply going to refer to Diego Perini’s NWEvents library. I believe his event system to be one of the better ones out there and he’s particular on iframe interaction.

I certainly would not start writing your own code to achieve this, this can easily be a year long project if you want to do it properly and even then will be inferior to Diego’s work.

More Related Contents:

  1. event.preventDefault() vs. return false
  2. What is DOM Event delegation?
  3. What is event bubbling and capturing?
  4. window.onload vs document.onload
  5. How can I capture the right-click event in JavaScript? [duplicate]
  6. How can I trigger an onchange event manually? [duplicate]
  7. DOM event precedence
  8. event.preventDefault() vs. return false (no jQuery)
  9. Handle URL fragment identifier (anchor) change event in Javascript
  10. Accessing an object’s property from an event listener call in JavaScript
  11. jQuery equivalent of JavaScript’s addEventListener method
  12. Are event handlers in JavaScript called in order?
  13. HTML DOM: Which events do not bubble?
  14. Implementing jQuery’s “live” binder with native Javascript
  15. Handling “onclick” event with pure JavaScript
  16. JavaScript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events
  17. Is event a global variable that is accessible everywhere inside the callback chain?
  18. visibilitychange event is not triggered when switching program/window with ALT+TAB or clicking in taskbar
  19. Is bubbling available for image load events?
  20. React onClick function fires on render
  21. How can I get the destination URL for the onbeforeunload event?
  22. How to check whether dynamically attached event listener exists or not?
  23. In React, what’s the difference between onChange and onInput?
  24. Trigger onmouseover event programmatically in JavaScript
  25. Do I need to remove event listeners before removing elements?
  26. cloning javascript event object
  27. Call a Javascript function every 5 seconds continuously [duplicate]
  28. JavaScript Event prototype in IE8
  29. Detecting support for a given JavaScript event?
  30. In web browsers, what’s the difference between onblur and onfocusout?

Leave a Comment