YogeshChauhan . com

How to hide a DIV on clicks outside of it using jQuery?

in jQuery on 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


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to create bouncing balls using HTML canvas and JavaScript?HTMLHow to create a simple drop down menu using JavaScript and CSS?CSSJavaScript: Methods for HTML DOM classList PropertyJavaScriptArbitrary Arguments in SCSS functionsSCSSHow to create a Bootstrap style accordion using CSS and JavaScript?CSSINNER JOIN in PostgresPostgresCONCAT and CONCAT_WS Functions in PostgresPostgresHow to calculate elapsed time in JavaScript?JavaScriptWhat are CSS Specificity Rules and how does browser apply them?CSSHow to find the HCF or GCD and LCM of two given numbers using Swift?SwiftThe flex-grow, flex-shrink and flex-basis Properties in CSSCSSHow to change value of a span tag using a reference from another div using jQuery?jQuery