Parent div closes when a child is clicked. How to prevent this from happening?-CodePudding

I have a div with three child divs and two divs within the second child. My intention is to close the div when i click anywhere outside the parent div and it shouldnt close when i click inside it. But whenever i click on one of the child elements the div closes.

i tried to use window.addEventListener and if statement so that every time click outside the div is made the display changes to none.

let button = document.getElementById('btn');
let form = document.getElementById('form');
let submit_button = document.getElementById('submit');

window.addEventListener( 'click' , function(e) {
    if ( e.target = button ) {
        form.style.display = 'block';
        form.style.backgroundColor = 'black';
        form.style.color = '#fff';
        
        window.addEventListener( 'click' , function(e) {
            if ( e.target != button && e.target != form ) {
                form.style.display = 'none';
                
            }         
        });
    } 
})

        <button id="btn" > 
            Add  
        </button>

        <div id="form">
            <h1>Hello</h1>

            <div id="innerbox">

                <div id="prompts">
                    
                </div>


                <div id="user_inputs">
                    <input type="text" id="BookName" placeholder="Name">
                    <input type="text" id= "Author" placeholder="Author">
                    <input type="text" id="Pages" placeholder="Pages">
                </div>               
            </div>

            <div id="bottom_portion">
                <button id="submit">

                    Submit

                </button>
            </div>            
        </div>




    <script src="new.js">
    </script>

CodePudding user response：

Adding the handler at the document level is sufficient. In your handler use Element.closest to filter for a clicked button.

Use a css class to hide div#form and remove that className when button#btn is clicked (so: show the form).

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`#btn`)) {
    document.querySelector(`#form`)
      .classList.remove(`hidden`);
    evt.target.closest(`#btn`).setAttribute(`disabled`, `disabled`);
  }
  
  if (evt.target.closest(`#submit`)) {
    console.clear();
    console.log(`button#submit clicked: do something with the form`);
    
  }
}

.hidden {
  display: none;
}

<button id="btn">Add</button>

<div id="form" >
  <h1>Hello</h1>

  <div id="innerbox">
    <div id="prompts"></div>
    <div id="user_inputs">
      <input type="text" id="BookName" placeholder="Name">
      <input type="text" id="Author" placeholder="Author">
      <input type="text" id="Pages" placeholder="Pages">
    </div>
  </div>
  <div id="bottom_portion">
    <button id="submit">Submit</button>
  </div>
</div>

CodePudding user response：

you can use event progagation.

here is the code, stopProgation method is used to prevent the event call parent.

// Get a reference to the parent div
const parentDiv = document.getElementById("parent-div");

// Add a click event listener to the parent div
parentDiv.addEventListener("click", function(event) {
  // Stop the click event from propagating to the parent div
  event.stopPropagation();
});

// Add a click event listener to the document to close the div
// when the user clicks anywhere outside of it
document.addEventListener("click", function() {
  parentDiv.style.display = "none";
});

CodePudding user response：

There are multiple errors. In If statements you should use == instead of = My solution works if you want to check if was clicked.

let button = document.getElementById('btn');
let form = document.getElementById('form');
let submit_button = document.getElementById('submit');
let body = document.getElementsByTagName("body")[0];

window.addEventListener( 'click' , function(e) {
    if ( e.target == button ) {
        e.stopPropagation();
        form.style.display = 'block';
        form.style.backgroundColor = 'black';
        form.style.color = '#fff';     
    } else if( e.target == body ){
      form.style.display = 'none';
    }
})

<button id="btn"> Add </button>

        <div id="form">
            <h1>Hello</h1>
            <div id="innerbox">
                <div id="prompts"></div>
                <div id="user_inputs">
                    <input type="text" id="BookName" placeholder="Name">
                    <input type="text" id= "Author" placeholder="Author">
                    <input type="text" id="Pages" placeholder="Pages">
                </div>               
            </div>
            <div id="bottom_portion">
                <button id="submit">
                    Submit
                </button>
            </div>            
        </div>