Javascript Detect click event outside of div

Question

I have a div with id=\"content-area\", when a user clicks outside of this div, I would like to alert them to the fact that they clicked outside of it. How would I use JavaSc

Answer 1

Use document.activeElement to see which of your html elements is active.

Here is a reference: document.activeElement in MDN

Answer 2

Here is the fiddle : http://jsfiddle.net/uQAMm/1/

$('#outercontainer:not(#contentarea)').on('click', function(event){df(event)} );
function df(evenement)
{
    var xstart = $('#contentarea').offset().left;
    var xend = $('#contentarea').offset().left + $('#contentarea').width();

    var ystart = $('#contentarea').offset().top;
    var yend = $('#contentarea').offset().top + $('#contentarea').height(); 

    var xx = evenement.clientX;
    var yy = evenement.clientY;

    if ( !(  ( xx >=  xstart && xx <=  xend ) && ( yy >=  ystart && yy <=  yend )) )
    {
        alert('out');
    }


}

Answer 3

$('#outer-container').on('click', function (e) {
     if (e.target === this) {
        alert('clicked outside');
     }
});

This is for the case that you click inside the outer-container but outside of the content-area.

Answer 4

Put this into your document:

<script>
document.onclick = function(e) {
  if(e.target.id != 'content-area') alert('you clicked outside of content area');
}
</script>