如何检测两个块外的点击

Question

如何检测两个区域外的点击

我的jquery代码是：

$(document).ready(function() {
    $('.js-bottom-navbar__consultant').click(function () { 
        $('.bottom-navbar__consultant-content').toggleClass('navbar__consultant-content--opened');
    });

此部分甚至可以检测到儿童元素上的点击，但它不起作用

    $(document).on('click', function(e) {
        if ($(e.target).is('.js-bottom-navbar__consultant') === false) {
            $('.bottom-navbar__consultant-content').removeClass('navbar__consultant-content--opened');
        }
    }); 
});

html

<div class="js-bottom-navbar__consultant bottom-navbar__consultant">
  <p>Some text too</p>
  <p class="js-consultant__button consultant__button consultant__button--online">                <span class="button__text--desktop">Some text</span>
  </p>
</div>
<div class="bottom-navbar__consultant-content navbar__consultant-content ">
  <div class="consultant__details consultant__status--online consultant__status">
    <img class="consultant__img" src="">
    <div class="consultant__text">
      <p class="consultant__name">
        Name
      </p>
      <p class="consultant__specification">
        Specification
      </p>
      <a href="#" class="consultant__question">
        Start
      </a>
    </div>
  </div>       
</div>

Jsfiddle

Answer 1

我在探索元素外部点击时做了good deal of work。还有一个fairly lengthy answer-thread，它通过了一些方法。我找到这两个元素的具体问题的解决方案是这样的：

document.body.addEventListener('click', function(e){
    if(!element1.contains(e.target) && !element2.contains(e.target)){
         //do the work here
    }
});

element1和element2是要检查的元素，其中的点击不在。