Question

I have a main page (main.html) which opens an iframe page (iframe.html).. The iframe is appended as a kind of thickbox window on main.html .Now on this iframe.html, there is a div element “myDiv” and I need to detect click outside of this myDiv element..

The script is written inside a JS called in iframe.html

I already tried a few things (binding event to document and removing from myDiv), but that is not working..

$(document).click(function() {
  //your code here
});

$("#myDiv").unbind("click");

I am not sure if this issue has got anything to do because of the iframe…

Please help me. Thank you.

Answer 1

Have you tried something like this? It listens for all clicks on the document, but only triggers your code if the target of the event is not the myDiv element. This way, you can tell if the click was outside the myDiv element or not…. I used jQuery:


// assign a document listener
$(document).click(function(e){

if( $(e.target).attr('id') != "myDiv" )
{
  // execute your code here
  alert( e.target );        }
});

// assign an element listener
$('#myDiv').live('click',function(){alert("clicked on myDiv")});

It also allows you to assign specific code to the myDiv element to be executed if the user clicks on the myDiv element directly…