How do I detect a click outside an element?

0 votes

I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area.

Is something like this possible with jQuery?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});
Sep 10 in Angular by kartik
• 35,500 points
199 views

1 answer to this question.

0 votes

Hello @kartik,

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

Hope it helps!!
Thank you!!

answered Sep 10 by Niroj
• 76,940 points

Related Questions In Angular

0 votes
1 answer

How can we display message when we click some element(button) that server is loading?

hey kartik,  As $route is used for deep-linking URLs ...READ MORE

answered Feb 11 in Angular by Niroj
• 76,940 points
828 views
0 votes
1 answer

How to detect a route change in Angular?

Hii Kartik For Angular 7 someone should write like: this.router.events.subscribe((event: Event) ...READ MORE

answered Apr 22 in Angular by Niroj
• 76,940 points
6,742 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4 in Angular by Niroj
• 76,940 points
3,895 views
0 votes
1 answer

How do I conditionally add attributes to React components?

Hello @kartik, For certain attributes, React is intelligent ...READ MORE

answered Jul 22 in Angular by Niroj
• 76,940 points
1,132 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28 in JQuery by Niroj
• 76,940 points
4,304 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12 in JQuery by Niroj
• 76,940 points
285 views
0 votes
1 answer

How to enable Bootstrap tooltip on disabled button?

Hii @kartik, You can wrap the disabled button ...READ MORE

answered May 12 in JQuery by Niroj
• 76,940 points
1,020 views
+1 vote
2 answers

How to set cache false for getJSON in jQuery?

You can't pass any configuration parameters to ...READ MORE

answered Oct 7 in JQuery by Amit
• 140 points
288 views
0 votes
1 answer

How do you bind an Enum to a DropDownList control in ASP.NET?

Hello @kartik, I probably wouldn't bind the data as it's ...READ MORE

answered Jul 23 in Angular by Niroj
• 76,940 points
236 views
0 votes
1 answer

How do I include a JavaScript script file in Angular and call a function from that script?

Hello @kartik, Refer the scripts inside the angular-cli.json (angular.json when using ...READ MORE

answered Sep 8 in Angular by Niroj
• 76,940 points
284 views