Javascript Detect click event outside of div
Solution 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';
}
}
Solution 2
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)
Solution 3
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)!
Solution 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!
Solution 5
Use document.activeElement
to see which of your html elements is active.
Here is a reference: document.activeElement in MDN
Related videos on Youtube
Comments
-
Dibish almost 2 years
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>
-
Harry over 10 years1. What have you tried so far? can you post that code? 2. You want click detection anywhere outside the
content-area
(or) anywhere outsidecontent-area
but insideouter-container
? -
Aran Mulholland almost 7 years@Harry, I don't care what steps the OP has taken. All I care to see is the solution to this problem. Making people post their own attempts in order to determine if they are worthy to answer is ridiculous. The purpose of this site is to be the main repository of answers relating to programming, making people posts their own attempts does not further this goal. On the other your other questions are well thought out and if they are the only reason you asked to see the attempts then that is fair. However I notice you have not provided an answer, so maybe you did not find the question worthy.
-
-
Harry over 10 yearsThis function is called when we click inside
#content-area
also. -
DjebbZ over 9 yearsWell, DOM API has the equivalent of your recursive function : node.contains. And it has very good support (IE5+ !). Just discovered it today.
-
Thomas Orlita over 7 yearsBit faster:
var element = document.getElementById('outer-container');
and then justif(e.target.id != element.id)
-
kuzey beytar almost 7 yearsYou should use
addEventListener( 'click', function(e) { ... });
all the time. not.onclick = funciton(e){ ... }
function.. -
neophyte almost 7 yearsThe fiddle link is expired.
-
Simon Rigét almost 7 yearsThis is not a jquery question.
-
Admin about 5 yearsThis is not a jquery question.