Удалить класс при нажатии за пределами div (включая детей)

Question

Я использую приведенный ниже код для инициализации removeClass(), когда нажимаю вне указанного c div. Однако на практике это влияет только на это div напрямую, а не на детей внутри него. Очевидно, что при нажатии на родителя вы фактически нажимаете на дочерних, а не на родителя напрямую.

Есть ли способ отредактировать ниже jQuery, чтобы он включал щелчок в любом месте внутри этого родителя div ?

$(document).on('click', function(e) {
    if( $(e.target).is(parentDiv) === false ) {

        // Remove all classes
        otherDiv.removeClass();
    }
});

Answer 1

Наряду с проверкой, если текущая цель не совпадает с parentDiv, вы можете дополнительно проверить, не являются ли какие-либо из целей также потомками parentDiv, используя jQuery .has() такой метод:

$(document).on('click', function(e) {
  if (!$(e.target).is(parentDiv) && parentDiv.has(e.target).length === 0) {

    // Remove all classes
    otherDiv.removeClass();
  }
});

В основном, если e.target является потомком parentDiv, то parentDiv.has(e.target).length вернет ненулевое значение, иначе вернет 0.

Демо:

const parentDiv = $('#parent')
$(document).on('click', function(e) {
  console.clear();
  if (!$(e.target).is(parentDiv) && parentDiv.has(e.target).length === 0) {
    console.log('Clicked Outide #parent')
  }
});

#parent{background:#99c0c3;width:160px;height:120px;position:relative}
#child{background:#ffde99;width:50%;height:50%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  Click outside parent, inside parent and inside child
</p>
<div id="parent">parent
  <div id="child">child</div>
</div>