如果单击外部选择器则触发事件

Question

我试图点击按钮以外的某个地方，隐藏元素，但我不明白，我不知道该怎么做。

$(function(){
  
  $(document).on('click','#foo',function(){
    let div = $('#bar');
    if( div.css('display') === 'none' ){
      div.show();
    }
    
    else{
      div.hide();
    }
  });

})

#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

我有一个想法，但它不起作用。

  $(document).on('click','html',function(e){
    if(e.eventTarget !== 'foo'){
      $('#bar').hide();
    }
  });

我遇到了 2 个问题，如果选择器是 html，页面将不会响应，并且其中的代码只是为了显示我想要获取的内容。

Answer 1

不需要jQuery，你可以简单地测试一下.closest('#bar')是否存在：

const bar = document.querySelector('#bar');
let hidden = false;
document.body.addEventListener('click', (e) => {
  if (e.target.closest('#foo')) {
    console.log('clicked inside, returning');
    return;
  }
  console.log('clicked outside');
  bar.style.display = hidden ? 'block' : 'none';
  hidden = !hidden;
});

body {
  height: 200px;
}
#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<button id="foo">Toggle</button>
<div id="bar"></div>

Answer 2

您可能必须消耗冒泡到父节点的事件。

$(function() {

  $('#foo').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#bar').toggle();
    console.log('toggle ... bar');
  });

  $(document).on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#bar').hide();
    console.log('hide ... bar');
  });
})

#foo {
  min-width: 35%;
}

#bar {
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>

Answer 3

我认为为此使用焦点和模糊功能会更好

这就是我的做法

<button id="test">
  Hello
</button>

<div class="blue-container" tabindex="1">

</div>

tabindex 全局属性指示其元素是否可以被聚焦

$('#test').focus(function () {
    $('.blue-container').show().focus();
});

$('.blue-container').blur(function () {
    $('.blue-container').hide();
});

Answer 4

这是最简单的方法。

    $(document).on("click",function() {
      if(event.target.id == 'foo') {
        //if #foo is clicked, do nothing
      }
      else {
         //if the button is not clicked
         $('#bar').hide();
      }
    });

#foo{
  min-width: 35%;
}

#bar{
  max-width: 35%;
  min-height: 100px;
  background-color: aliceblue;
  border: 1px solid blue;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="foo">Toggle</button><br><br>
<div id="bar"></div>