Yogesh Chauhan's Blog

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.

Discussion

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.

Example

mouseup

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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What is a component helper function in React?ReactWordPress: How to get field values in Advanced Custom Fields?WordPressCreate a simple bar chart and column chart using pure CSS gridCSSHow to disable scrolling on html body on menu click using JavaScript?JavaScriptWhat does Containment mean in React?ReactHow to animate list items using CSS and JavaScript?CSSHow to remove N/A from Radio Button list in Drupal?Drupalfirst-of-type and last-of-type selectors in CSSCSSHow Routing works in Angular?AngularWhat are Null Sessions?MiscellaneousHow to add CurrencyPipe in TypeScript file in Angular 9 Project?AngularHow does @extend rule work in SCSS (Sass)?SCSS