Hide an Element When Clicking Outside in jQuery

By the end of this page, you will understand how click events bubble in jQuery, why event.stopPropagation() matters, and how to detect clicks outside an element without interfering with links or buttons inside it. You will also learn safer patterns for real projects, including checking whether the click target is inside a container.

In the browser, click events do not only happen on the exact element you click. They also bubble up through parent elements.

That means when you click a link inside .form_wrapper, the event first happens on the <a> element, then moves up to the div, then to body, then beyond.

This matters because your code says:

$('body').click(function() {
  $('.form_wrapper').hide();
});

So every click eventually reaches body, which hides the wrapper.

To prevent that, you used:

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

That tells the browser: "Do not let this click continue bubbling upward."

This is the core idea behind click outside to close behavior:

• clicks outside the box should close it
• clicks inside the box should not close it
• links and buttons inside should still do their own job

A more reliable way to implement this is to listen for clicks on the whole document and check whether the clicked element is inside the target box. If it is outside, hide the box. If it is inside, do nothing.

Think of a click event like a message moving up a building.

• You click a link inside a room.
• The message starts in that room.
• Then it travels up through the hallway, the floor, and finally the whole building.

In this analogy:

• the <a> is the room
• .form_wrapper is the floor section
• body or document is the whole building

If the building manager (body) reacts to every message by hiding the whole section, then clicks inside the room can accidentally trigger that too.

stopPropagation() is like saying: "Stop the message here. Don't pass it to the building manager."

Another approach is even smarter: let the message reach the building manager, but ask, "Did this click come from inside the box or outside it?" If outside, close it. If inside, leave it alone.

The most common jQuery pattern for clicking outside an element looks like this:

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

How it works

• event.target is the exact element that was clicked.
• .closest('.form_wrapper') checks whether that clicked element, or one of its parents, is .form_wrapper.
• If no matching parent is found, the click happened outside.
• Then the wrapper is hidden.

Complete example

<div class="form_wrapper">
  <a class="agree" href="#">I Agree</a>
  <a class="disagree" =>Disagree

Consider this code:

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

And this HTML:

<div class="form_wrapper">
  <a class="agree" href="#">I Agree</a>
</div>

Case 1: User clicks the I Agree link

1. The user clicks <a class="agree">.
2. event.target is the <a> element.
3. $(event.target).closest('.form_wrapper') looks upward from the link.
4. It finds the parent .form_wrapper.

This pattern appears in many common interfaces.

Dropdown menus

When a user opens a menu, clicking elsewhere should close it.

Modal or popup panels

A panel may stay open while the user interacts inside it, but close when they click outside.

User account menus

Profile menus in navigation bars often close when focus moves elsewhere.

Search suggestion boxes

Autocomplete results should disappear when the user clicks outside the search area.

Context menus

Right-click menus or custom action menus often close when the user clicks elsewhere.

Filter panels

A product filter drawer or floating filter box may close if the user clicks outside it.

In all of these cases, the important rule is the same:

• inside interaction should remain usable
• outside interaction should dismiss the component

In real projects, developers usually combine outside-click detection with a few practical patterns.

1. Guard clause pattern

$(document).on('click', function(event) {
  if ($(event.target).closest('.form_wrapper').length) {
    return;
  }

  $('.form_wrapper').hide();
});

This reads as: if the click is inside, stop early. Otherwise, close.

2. Toggle button + outside close

$('.open-form').on('click', function(event) {
  event.stopPropagation();
  $('.form_wrapper').toggle();
});

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper, .open-form').length) {
    $('.form_wrapper').hide();
  }
});

1. Hiding on every body click without checking the target

Broken code:

$('body').click(function() {
  $('.form_wrapper').hide();
});

Problem: Every click bubbles to body, including clicks inside the wrapper.

Fix:

$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

2. Forgetting that links may navigate away

Broken code:

<a href="#" class="agree">I Agree</a>

If you do not prevent default behavior, clicking may jump to the top of the page.

Fix:

// Hide when clicking outside
$(document).on('click', function(event) {
  if (!$(event.target).closest('.form_wrapper').length) {
    $('.form_wrapper').hide();
  }
});

// Prevent parent click handler from running
$('.form_wrapper').on('click', function(event) {
  event.stopPropagation();
});

// Handle link click
$('.agree').on('click', function(event) {
  event.preventDefault();
  console.log('Agree');
});

Key rules

• Click events bubble upward.
• event.target is the actual clicked element.
• .closest(selector) checks whether the click happened inside a matching parent.

Why do clicks inside the div also trigger the body click handler?

Because click events bubble from the clicked element up through its parent elements until they reach higher ancestors like body or document.

Is event.stopPropagation() the correct solution?

It can work, especially in small examples. But checking event.target with .closest() is often clearer and easier to maintain.

Should I use body or document for outside-click detection?

document is the more common choice because it represents the whole page event context and is widely used for delegated event handling.

Why are my links still not behaving correctly?

If your links use href="#", the browser may navigate to the top of the page unless you call event.preventDefault().

Is href="javascript:;" a good practice?

No. It is generally discouraged. Use a real link for navigation or a button for actions.

What is the difference between preventDefault() and stopPropagation()?

• Event bubbling — explains why clicks on child elements also reach parent elements.
• Event delegation — useful when elements are added dynamically after the page loads.
• event.preventDefault() — important for stopping link navigation when handling clicks in JavaScript.
• event.stopPropagation() — directly related to preventing parent click handlers from running.
• jQuery .closest() — a common way to check whether a click happened inside a specific container.
• jQuery event handling with .on() — the standard modern jQuery pattern for attaching handlers.
• Buttons vs links in HTML — helps choose the correct element for actions versus navigation.
• Show/hide UI components — related to dropdowns, popups, menus, and dismissible panels.