css 如何处理点击窗口事件在良好的方式使用javascript

83qze16e 于 2022-12-24 发布在 Java

关注(0)|答案(2)|浏览(171)

我有一个窗口，使用javascript点击一个按钮就可以打开，点击窗口内部不能关闭窗口，点击窗口外部才能关闭窗口，目前我一直抓取e. target. className来判断被点击的元素是否应该关闭窗口，但如果一个窗口中有上百个元素，这个方法似乎不是一个好方法。我想问一下，是否有一个正式的，什么是一个好方法来处理这个需要？

$('.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>

css

来源：https://stackoverflow.com/questions/74896731/how-to-handle-click-window-event-in-good-way-using-javascript

2条答案

按热度按时间

tcomlyy61#

使用.closest查找单击是否在.dialog内部。如果返回.dialog元素，则单击在内部，因此不执行任何操作;否则，单击是在按钮外部或按钮上，因此您可以关闭对话框。
而且，您几乎肯定不希望在每次单击.click时向文档添加另一个单击侦听器;最好只添加一次侦听器。

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>

赞(0）回复(0）举报 2022-12-24

i5desfxk2#

您可以在单击开始时指定一个body id，并且可以在单击body上的任何位置时关闭表单。

赞(0）回复(0）举报 2022-12-24