How to handle click window event in good way using javascript-CodePudding

I have a window that can be opened by clicking a button using javascript. The window cannot be closed by clicking on the inside of the window, and the window can only be closed by clicking on the outside of the window. At present, I always grab e.target.className to judge whether the clicked element should close the window, but if there are hundreds of elements in a window, this method does not seem to be a good way. I would like to ask if there is a formal What's a good way to handle this need? Thanks in advance for your help and Merry Christmas everyone

$('.click').on('click',function(e){
   $('.dialog').toggle()
  $(document).on('click',function(e){
    if(e.target.className == 'confirm' || e.target.className == 'item' || e.target.className == 'text' || e.target.className == 'dialog_wrap' || e.target.className == 'dialog' || e.target.className == 'head' || e.target.className == 'title'){
      $('.dialog').css('display','inline-block');
    }
  })
})

.click {
  position: relative;
}
.click .dialog {
  display: none;
  width: 300px;
  position: absolute;
  background-color: yellow;
  border: 1px solid #ccc;
}
.click .dialog li {
  text-align: left;
}
.click .dialog .confirm {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >click

<div >
  <header >
    <h1 >my is title</h1>
  </header>
   <ul class='dialog_wrap'>
     <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <input type="button" value="confirm" >
   </ul>
</div>
</button>

CodePudding user response：

Find whether the click was inside the .dialog with .closest. If it returns a .dialog element, the click was inside, so do nothing; otherwise, the click was outside or on the button, so you can close the dialog.

Also, you almost certainly don't want to add another click listener to the document every time .click is clicked; better to only add the listener once.

const dialog = $('.dialog');
$('.click').on('click', function(e) {
  if (!e.target.closest('.dialog')) {
    dialog.toggle();
  }
  e.stopPropagation();
});
$(document).on('click', function(e) {
  dialog.hide();
});

.click {
  position: relative;
}

.click .dialog {
  display: none;
  width: 300px;
  position: absolute;
  background-color: yellow;
  border: 1px solid #ccc;
}

.click .dialog li {
  text-align: left;
}

.click .dialog .confirm {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button >click

<div >
  <header >
    <h1 >my is title</h1>
  </header>
   <ul class='dialog_wrap'>
     <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <li class='item'>
       <p class='text'>Lorem ipsum dolor, sit amet consectetur</p>
       <span class='time'>2022-12-23</span>
     </li>
      <input type="button" value="confirm" >
   </ul>
</div>
</button>

CodePudding user response：

You can assign a body id when the click starts, and you can close the form when you click anywhere on the body.