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

How to handle click window event in good way using javascript – Jquery

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?

$('.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 class="click">click

<div class="dialog">
  <header class="head">
    <h1 class="title">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" class="confirm">
   </ul>
</div>
</button>
Tags:

2

Answers


  1. 0

    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 class="click">click

<div class="dialog">
  <header class="head">
    <h1 class="title">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" class="confirm">
   </ul>
</div>
</button>
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search