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

Looking to transfer JSON data between JavaScript and Java code

Google Chrome introduces innovative composite layers to handle stubborn content resistant to compression

When an Ajax call is made, the controller will return a HTTP status code of 500 if it queries the database without using the `

Knockout Table Sorter not refreshing data on update

Is the combination of elements by CSS Minifiers harmful?

React issue: parent state becoming unresponsive when updating during input onChange event

React fails to display the content

The most effective way to code overlapping html buttons

Utilize React Helmet for Dynamic Page Titles

Upload the PDF file along with other form data in a React application

What happens when the user closes a notification in GetUIkIt 3?

Create and export a global function in your webpack configuration file (webpack.config.js) that can be accessed and utilized

retrieving data from a node and embedding it into an HTML file

Create a form with Vue that generates input fields based on JSON data and

Iterating over images and displaying them in Laravel's blade templating engine, updating outdated Angular code

Issue: jQuery Datatable not functioning properly while attempting to populate the table through JavaScript.Explanation: The

"The powerful trio of Moongose, expressjs, and node-webkit combine forces

Error: The configuration property is not defined, causing a TypeError at Class.run ~/node_modules/angular-cli/tasks/serve.js on line 22

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

<datalist> trigger that occurs when a selection is made