Capture any clicks that fall outside of the specified set

Question

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu.

What I want is for the sub-menu to close whenever a click occurs outside of it.

I attempted a solution using JavaScript, but it didn't work as expected:

$('*:not(.submenu > li > a)').click(function() {
    $('nav .dropdown input').removeAttr('checked');
    console.log('clicked outside sub-menu');
});

This code captures every click event, including those within .submenu > li > a, causing the menu to close even when trying to open it.

The dropdown menu is controlled by a checkbox input in the CSS. Here's the CSS code for reference, although my issue lies in the JavaScript part:

Here is a fiddle containing the CSS code: https://jsfiddle.net/z3yj7pLs/

ul.dropdown {
    position:fixed;
    top:30px;
    width:100%;
    height:3em;
    margin:0;
    padding:0 10px;
    color:#eee;
}

(remaining CSS properties remain unchanged...)

javascript jquery html css

Answer 1

Answer №1

If you want to detect clicks on the document and determine if the click occurred outside of the dropdown, you can use the following code:

$(document).click(function(event) {
    if ($(event.toElement).parents('.dropdown').length > 0) {
        console.log('Clicked inside the dropdown area');
    } else {
        console.log('Clicked outside the dropdown area');
    }
});

Check out this functional snippet:

$(document).click(function(event) {
    if ($(event.toElement).parents('.dropdown').length > 0) {
     console.log('Clicked inside the dropdown area');
    } else {
        console.log('Clicked outside the dropdown area');
    }
});

body {
  background: black;
}
ul.dropdown {
  position: fixed;
  top: 30px;
  width: 100%;
  height: 3em;
  margin: 0;
  padding: 0 10px;
  color: #eee;
}

/* More CSS code... */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown">
  <li>
    <input id="nav-dropdown-check" type="checkbox" name="menu" />
    <label for="nav-dropdown-check"><a class="nav-imitation">More</a></label>
    <ul class="submenu">
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
    </ul>
  </li>
</ul>

Answer 2

If you want to detect clicks on the document and determine if the click occurred outside of the dropdown, you can use the following code:

$(document).click(function(event) {
    if ($(event.toElement).parents('.dropdown').length > 0) {
        console.log('Clicked inside the dropdown area');
    } else {
        console.log('Clicked outside the dropdown area');
    }
});

Check out this functional snippet:

$(document).click(function(event) {
    if ($(event.toElement).parents('.dropdown').length > 0) {
     console.log('Clicked inside the dropdown area');
    } else {
        console.log('Clicked outside the dropdown area');
    }
});

body {
  background: black;
}
ul.dropdown {
  position: fixed;
  top: 30px;
  width: 100%;
  height: 3em;
  margin: 0;
  padding: 0 10px;
  color: #eee;
}

/* More CSS code... */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown">
  <li>
    <input id="nav-dropdown-check" type="checkbox" name="menu" />
    <label for="nav-dropdown-check"><a class="nav-imitation">More</a></label>
    <ul class="submenu">
      <li><a href="#">Submenu 1</a></li>
      <li><a href="#">Submenu 2</a></li>
    </ul>
  </li>
</ul>

Answer 3

Answer №2

To optimize this task, consider implementing event delegation:

$('body').on('click', ':not(.submenu > li > a)', function() {
    $('nav .dropdown input').removeAttr('checked');
    console.log('clicked outside sub-menu');
});

By utilizing event delegation, you can avoid cluttering the DOM with numerous event handlers. Instead, you only need one handler that disregards clicks on your menu. You may have to refine the ':not()' selector or apply JavaScript logic within the event handler (e.g.

if (!$(this).parents('.submenu').length) { ...collapse }

)

Answer 4

To optimize this task, consider implementing event delegation:

$('body').on('click', ':not(.submenu > li > a)', function() {
    $('nav .dropdown input').removeAttr('checked');
    console.log('clicked outside sub-menu');
});

By utilizing event delegation, you can avoid cluttering the DOM with numerous event handlers. Instead, you only need one handler that disregards clicks on your menu. You may have to refine the ':not()' selector or apply JavaScript logic within the event handler (e.g.

if (!$(this).parents('.submenu').length) { ...collapse }

)

Capture any clicks that fall outside of the specified set

Answer №1

Answer №2

Similar questions

including a content tag into an input field within a template

What is the best method for decreasing the space between ordered list elements?

Why won't NextJS Image elements render on iOS 16 when they are not in the viewport initially?

In order for Jquery's html() and dialog functionalities to work seamlessly, the inclusion of an alert box is imperative

Utilizing HTML5 to import content from text files

Display a div in front of another using Material UI when hovering

Leveraging TipTap.dev for building a joint editing platform -

What is preventing ShowViaLink() from functioning properly in Firefox and Internet Explorer?

Simulating an API request using Vue and Jest/Vue test utils

Html elements overlapping due to incorrect positioning

Is there an equivalent to Tomcat specifically designed for Node.js applications?

What steps can be taken in Next.js to display a 404 page when data is not retrieved from the Wordpress admin?

In what way does the map assign the new value in this scenario?

Encountering an issue with JQuery when attempting to create a double dropdown SelectList. Upon submitting the POST request, the output received is always

I possess a JSON object retrieved from Drafter, and my sole interest lies in extracting the schema from it

Tips for activating an HTML input field using Javascript

unable to execute PHP code

Unexpected behavior exhibited by DOM elements

How do I add a "Switch to Desktop Site" link on a mobile site that redirects to the desktop version without redirecting back to the mobile version once it loads?

Switch from jQuery modal to non-modal dashboard after logging in