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 JavaScript to solve this issue?

<div id = "outer-container">
   <div id = "content-area">
      Display Conents 
   </div>
</div>

Answer 1

In pure Javascript

Check out this fiddle and see if that's what you're after!

document.getElementById('outer-container').onclick = function(e) {
    if(e.target != document.getElementById('content-area')) {
        document.getElementById('content-area').innerHTML = 'You clicked outside.';          
    } else {
        document.getElementById('content-area').innerHTML = 'Display Contents';   
    }
}

http://jsfiddle.net/DUhP6/2/

Answer 2

Bind the onClick-Event to an element that is outside your content area, e.g. the body. Then, inside the event, check whether the target is the content area or a direct or indirect child of the content area. If not, then alert.

I made a function that checks whether it's a child or not. It returns true if the parent of a node is the searched parent. If not, then it checks whether it actually has a parent. If not, then it returns false. If it has a parent, but it's not the searched one, that it checks whether the parent's parent is the searched parent.

function isChildOf(child, parent) {
    if (child.parentNode === parent) {
      return true;
    } else if (child.parentNode === null) {
      return false;
    } else {
      return isChildOf(child.parentNode, parent);
    }
}

Also check out the Live Example (content-area = gray)!

Answer 3

The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node or not

You can catch events using

document.addEventListener("click", clickOutside, false);
function clickOutside(e) {
   const inside = document.getElementById('content-area').contains(e.target);
}

Remember to remove the event listened in the right place

document.removeEventListener("click", clickOutside, false)

Answer 4

I made a simple and small js library to do this for you:

It hijacks the native addEventListener, to create a outclick event and also has a setter on the prototype for .onoutclick

Basic Usage

Using outclick you can register event listeners on DOM elements to detect whether another element that was that element or another element inside it was clicked. The most common use of this is in menus.

var menu = document.getElementById('menu')

menu.onoutclick = function () {
    hide(menu)
}

this can also be done using the addEventListener method

var menu = document.getElementById('menu')

menu.addEventListener('outclick', function (e) {
    hide(menu)
})

Alternatively, you can also use the html attribute outclick to trigger an event. This does not handle dynamic HTML, and we have no plans to add that, yet

<div outclick="someFunc()"></div>

Have fun!

Answer 5

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

Here is a reference: document.activeElement in MDN

Answer 6

$('#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 7

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 8

Put this into your document:

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

Answer 9

Here is a simple eventListener that checks all parent elements if any contain the id of the element. Otherwise, the click was outside the element

html

<div id="element-id"></div>

js

const handleMouseDown = (ev) => {
    let clickOutside = true
    let el = ev.target
    while (el.parentElement) {
        if (el.id === "element-id") clickOutside = false
        el = el.parentElement
    }
    if (clickOutside) {
        // do whatever you wanna do if clicking outside
    }
}
document.addEventListener("mousedown", handleMouseDown)

Answer 10

use jquery as its best for DOM access

$(document).click(function(e){
 if($(e.target).is("#content-area") || $(e.target).closest("#content-area").length)
  alert("inside content area");
else alert("you clicked out side content area");
});