How to hide a DIV on clicks outside of it using jQuery?
February 17, 2021

We can use jQuery mouseup() method to check the user click on the document.

This is how we can do that.

In the example above we check if the target of the click is neither the container nor a descendant of the container and if so, we will hide the element.


jQuery mouseup() method

This method binds an event handler to the “mouseup” JavaScript event. It triggers that event on an element specified.

This method is a shortcut for .on(‘mouseup’, handler) and .trigger(‘mouseup’).

The mouseup event is sent to an element when the mouse pointer is over the element, and the mouse button is released.



mouseup and mousedown

Sources: jQuery Official Guide and Stakeoverflow


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

Solution to Precision Problem in JavaScript NumbersJavaScriptSome interesting HTML Input Attributes to rememberHTMLWhat’s new in WordPress 5.5?WordPressUPDATE and DELETE Statements in PostgresPostgresHow to create a sticky menu pin using CSS?CSSCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPWordPress: How to print ACF array field values?WordPressAvoid using new Array() in JavaScriptJavaScriptThe Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLWhat is the difference between Loosely Typed Language and Strongly Typed Language?MiscHow to apply style to a specific child element using CSS?CSSFull and Partial ROLLUP in Postgresql with ExamplesPostgres