Menu
I'd like to hide a div when user click anywhere on the page outside of that div. How can I do that using raw javascript or jQuery?
413
addEventListener('click', function(e){ if (document. getElementById('clickbox'). contains(e. target)){ // Clicked in box } else{ // Clicked outside the box } });
To detect click outside element with JavaScript, we can use the element's contains method. const specifiedElement = document. getElementById("a"); document. addEventListener("click", (event) => { const isClickInside = specifiedElement.
To add a click event listener on div tag using JavaScript, we can call the addEventListener method on the selected div. to add a div with a class.
To hide an element when clicked outside: Add a click event listener to the document object. On each click, check if the clicked element is outside of the specific element using the contains() method. If the clicked element is outside, hide the original element.
Attach a click event to the document to hide the div:
$(document).click(function(e) {
$('#somediv').hide();
});
Attach a click event to the div to stop clicks on it from propagating to the document:
$('#somediv').click(function(e) {
e.stopPropagation();
});
First idea, in raw javascript (from this post):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#mydiv{
background-color: #999999;
height: 100px;
width: 100px;
}
-->
</style>
<script type="text/javascript">
document.onclick=check;
function check(e)
{
var target = (e && e.target) || (event && event.srcElement);
var obj = document.getElementById('mydiv');
if(target!=obj){obj.style.display='none'}
}
</script>
</head>
<body>
<div id="mydiv">my div</div>
</body>
</html>
Tested with IE6 and FireFox3.1, it does work as advertised.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
