CODEWITHSUNDEEP
javascriptiframedialogdom-events
Ben
Ben

Reputation: 10288

Detect click outside div doesn't work if click target is iframe

I've got dialog that I wrote and it closes when clicking outside (no overlay/backdrop).

It works nicely unless there's an iframe, in which case my listener on outside clicks is never called.

Here is a JSBIN to illustrate the problem. (http://jsbin.com/vuneyopedu/edit?js,console,output)

To briefly explain in the below screenshot:

Example

Question is - How do I make clicking anything outside the RED square (specifically clicking the iframe) decrement the number. (or close the dialog, in the "real" world)

Upvotes: 2

Views: 3204

Answers (2)

aleemb
aleemb

Reputation: 32085

The correct approach here is to use a modal and one of the strongest use-cases for the modal. By design modals prevent clicks from falling through to elements below hence there is no need to handle side effects like your iframe issue or e.stopPropagation() or anything else. It also makes positioning very clean.

As a side note, the currently accepted answer is a very poor approach since it relies on adding an event handler inside the iFrame, then binding that onto the parent container window. This is wrong on many levels: no separation of concerns, iframe from different domains will be blocked due to CORS, iframe will register with any and all parents even when not needed, etc.

Upvotes: 1

SONGLIN.WU
SONGLIN.WU

Reputation: 76

How about binding event to iframes' document.

iframes = document.getElementsByTagName('iframe');
iframesArray = Array.prototype.slice.apply(iframes);

iframesArray.forEach(function(frame) {
  frame.contentWindow.document.addEventListener('click', function() {
    inc();
  }, true);
});

Upvotes: 2

Related Questions