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

amazon

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 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
Different Types of Functions in JavaScriptJavaScriptIntroduction to Angular modules Part 3: NgModules vs JavaScript modules and Angular librariesAngularWhat’s a Log File and What are Log File Monitors?MiscellaneousWhat is an API?MiscellaneousWhat’s the difference between variables in CSS and SCSS (Sass)?CSSHow to display and animate image on scroll using JavaScript?JavaScriptWordPress plugin development: How to fix a SQL injection?WordPressHow to render lists inside a component in React?Reactclip and clip-path properties in CSSCSSWhat’s new in WordPress 5.5?WordPressWhy do we need HAVING Clause in SQL?SQL/MySQLHow to get start index and end index (as int) of substring in Swift?Swift