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, 2020 in Angular by kartik
• 37,520 points
2,962 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, 2020 by Niroj
• 82,880 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, 2020 in Angular by Niroj
• 82,880 points
4,282 views
0 votes
2 answers

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, 2020 in Angular by Niroj
• 82,880 points
29,127 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, 2020 in Angular by Niroj
• 82,880 points
25,023 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, 2020 in Angular by Niroj
• 82,880 points
8,731 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, 2020 in JQuery by Niroj
• 82,880 points
23,205 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, 2020 in JQuery by Niroj
• 82,880 points
3,268 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, 2020 in JQuery by Niroj
• 82,880 points
5,064 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, 2020 in JQuery by Amit
• 140 points
2,873 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, 2020 in Angular by Niroj
• 82,880 points
2,972 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, 2020 in Angular by Niroj
• 82,880 points
14,077 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP