Question 11183 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I want to show the pop-up only when clicked anywhere on the page, but it is showing when clicked on Menu as well – Jquery

Here is the code I wrote, and I tried to modify it but couldn’t find the right solution for my problem

<!-- Main content -->
<main>
  <p>
    Click the menu button in the top right corner to see the menu items.
  </p>

  <!-- Pop-up message -->
  <div id="pop-up">
    <p>Hello there!</p>
  </div>
</main>

<script>
  
      const menuButton = document.getElementById("menu-button");
      const menuItems = document.getElementById("menu-items");
      const popUp = document.getElementById("pop-up");

  
      menuButton.addEventListener("click", function () {
    
     if (menuItems.style.display === "none") {
          menuItems.style.display = "block";
    } else {
     menuItems.style.display = "none";
    }
    
   });


  document.addEventListener("click", function (event) {

    if (
    event.target !== menuButton && event.target !== menuItems
   ) {

         popUp.style.display = "block";
   }
    });

need help that this code should work if it is correct and need to hide the menu bar

Tags:

2

Answers


  1. 0

    The issue that you are having is because the target itself is probably no the menu items, is one of the childrens. You can check if is the children with .contains() Here is a example using your code

    <!-- Main content -->
<main>
  <button id="menu-button">
    XXXXX
  </button>
  <div  id='divOutside'style="background-color: aqua; padding: 100px;" >
    <p id='pInside' style="background-color: brown;">INSIDE CHILDRE P</p>
  </div>
  <p>
    Click the menu button in the top right corner to see the menu items.
  </p>

  <!-- Pop-up message -->
  <div style="display: none;" id="pop-up">
    <p>Hello there!</p>
  </div>
</main>

<script>
  
      const menuButton = document.getElementById("menu-button");
      const popUp = document.getElementById("pop-up");
      const dOutside = document.getElementById("divOutside");
      const pInside = document.getElementById("pInside");
      
      menuButton.addEventListener("click", function () {
        console.log("clicked")
   });

  document.addEventListener("click", function (event) {
    console.log(event.target)

    if (
    event.target !== menuButton && !dOutside.contains(event.target) && event.target !== dOutside
   ) {

         popUp.style.display = "block";
   }
    }); 
    </script>
    Login or Signup to reply.
  2. 0

    You can add event.stopPropagation() to your list of menus to avoid triggering the event when clicked.

    Based on your code:

    <!-- Main content -->
<main>
  <p>
    Click the menu button in the top right corner to see the menu items.
  </p>

<div id="menu-button">
<span>this is a menu of buttons</span>
<p>
<p>
<ul id="menu-items" onclick="event.stopPropagation()">
  <li>menu 1</li>
  <li>menu 2</li>
  <li>menu 3</li>
</ul>  

</div>
  <!-- Pop-up message -->
  <div id="pop-up" style="display:none">
    <p>Hello there!</p>
  </div>
</main>

<script>
  
      const menuButton = document.getElementById("menu-button");
      const menuItems = document.getElementById("menu-items");
      const popUp = document.getElementById("pop-up");

  
      menuButton.addEventListener("click", function () {
    
     if (menuItems.style.display === "none") {
          menuItems.style.display = "block";
    } else {
     menuItems.style.display = "none";
    }
    
   });


  document.addEventListener("click", function (event) {

    if (
    event.target !== menuButton && event.target !== menuItems
   ) {

         popUp.style.display = "block";
   }
    }); 
    
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search