Question

因此，我在页面顶部有一个搜索“模式框”（拥有HTML + CSS，而不是引导程序）。当我单击搜索栏时，我想打开模式框。然后，当它打开时，我想通过单击“ X”按钮或模式框外的任何位置使其关闭。

打开模式框并通过按下按钮将其关闭，适用于以下代码段：

<script  type="text/javascript">
  var search_box =  document.querySelector('#search-box-top');
  var search_box_bg =  document.querySelector('#search-box-top-bg');

  document.querySelectorAll('#close-search-box').forEach(el => el.addEventListener('click', function() {
    search_box.style.display = 'none';
    search_box_bg.style.display = 'none';
  }))

  document.querySelectorAll('#open-search-box').forEach(el => el.addEventListener('click', function() {
    search_box.style.display = 'block';
    search_box_bg.style.display = 'block';
  }))   
</script>

现在，我有以下代码来查看是在模式框内还是在模式框外单击：

 var specifiedElement = document.getElementById('search-box-top');
 var search_box_visible = document.getElementById('search-box-top').style.display;

if (search_box_visible = 'none') {
document.addEventListener('click', function(event) {
    var isClickInside = specifiedElement.contains(event.target);
    if (isClickInside) {
     console.log('You clicked inside')
    }
    else {
      console.log('You clicked outside')
    }
});
} else {

}

问题是，当模式框仍处于关闭状态时，第二个功能也起作用，因此控制台始终记录“您在外部单击”。所以我需要当search_box_visible = none时isClickInside可以工作，并且当它被阻止时，它应该返回设置display ='none';的else函数；

有人知道如何将这两者结合起来或做一个更好的功能来做到这一点吗？预先感谢！

Answer 1

您在此声明中有问题if (search_box_visible = 'none') 它应该是if (search_box_visible == 'none')或if (search_box_visible === 'none')

只需检查是否可以解决问题。

Answer 2

确保您正在检查click事件中的显示值。另外，您可以使用.closest（）方法检查单击是在模态内部还是外部进行。我确保也将打开按钮包括在支票中。

 document.addEventListener("click", function(event) {
    var search_box_visible = search_box.style.display;
    if(search_box_visible !== 'none'){
      if (event.target.closest('#search-box-top') || event.target.closest('#open-search-box')) {
        console.log("inside")
      } 
      else{
        console.log("outside")
        //search_box.style.display = "none";
      }         
    }
  });

仅当元素可见时才执行点击功能

2 个答案: