How to initiate a click outside a navigation bar to close it

Question

I am trying to create a JavaScript function that will make my side navigation menu close when a user taps outside it. Here is the code that am trying to implement after fetching the navigation.

var sidenav = document.getElementById("Mynav");
window.onclick = function(event) {
  if (event.target == sidenav) {
    sidenav.style.display = "none";
  }
};

The other sidenav functionalities are okay. But I suspect this equity JavaScript module (==), am not sure if it should be (!=). Any help will be great appreciated.

I didn't know javascript had this compexity. Can you refer me to the a resource that can explain JS bubbling to me well. Thanks for the help anyway — , Dec 18 '19 at 15:01
Okay lemme check Google for that, I actually saw that most websites have implemented the click outside element to close it with modals so I thought creatively and thought I could apply it to a sidenav. Some sidenavs close when you click outside them — , Dec 18 '19 at 15:08
Sorry about all my confusion. Your inital code is just fine, except for the comparison logic, I read it wrongly at first. Yeah, modals usually implements the behavior you want to achieve — gpaulini, Dec 18 '19 at 16:06
Okay. The javascript comparison logic is not clear , when you want to compare two values that are not equal. Is it =! Or == — , Dec 18 '19 at 16:19
Why does jquery require a library loaded into the page from storage locally or from server while javascript is autoloaded and ready to use although jquery is still addressed as a Javascript Library? — , Dec 18 '19 at 18:03
Browsers have a built-in JavaScript engine that interprets your code and allow the DOM to be manipulated. jQuery is a library written in JavaScript for web, so in order to use it in your js file it must be previously loaded in the page. That's also the case for jQuery based plugins/libs. — gpaulini, Dec 18 '19 at 18:28
Cool. Thats so awesome, the inbuilt javascript engine on most browsers — , Dec 19 '19 at 03:26
You need to check if the event target is not the navbar, nor any element within the navbar. There are a number of questions about this (seen in the Related column to the right). — Heretic Monkey, Dec 19 '19 at 21:09

score 1 · Answer 1 · edited Dec 19 '19 at 21:04

1

Test it:

if (event.target !== sidenav)

You want the target of your click not to be equal to sidenav. the logical operator in JavaScript which corresponds to this is good !==. It is to popularize the negation of the operator ==.

MDN Reference

edited Dec 19 '19 at 21:04

Heretic Monkey

11,687
7
53
122

answered Dec 18 '19 at 14:58

Emeric Hochart

56
5

Working on it, feedback on its way – Dec 18 '19 at 15:02
It disabled the whole thing. Js not working till I remove the window onclick and event function – Dec 18 '19 at 15:49
This will close the navbar if the user clicks anything inside the navbar, since the target will be the element inside the navbar, not the navbar itself. – Heretic Monkey Dec 19 '19 at 21:07

How to initiate a click outside a navigation bar to close it

1 Answers1