Виявлення клацання поза елементом (ванільний JavaScript)

Я шукав гарне рішення скрізь, але я не можу знайти такого, яке б не використовувало jQuery .

Чи існує крос-браузер, звичайний спосіб (без дивних хакерів або легкого злому коду), щоб виявити клацання поза елементом (який може мати чи не мати дітей)?

Додайте прослуховувач події documentта використовуйте, Node.contains()щоб визначити, чи ціль події (яка є елементом, який найчастіше натискається) знаходиться у вказаному елементі. Це працює навіть в IE5

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);

  if (!isClickInside) {
    //the click was outside the specifiedElement, do something
  }
});

var specifiedElement = document.getElementById('a');

//I'm using "click" but it works with any event
document.addEventListener('click', function(event) {
  var isClickInside = specifiedElement.contains(event.target);
  if (isClickInside) {
    alert('You clicked inside A')
  } else {
    alert('You clicked outside A')
  }
});

div {
  margin: auto;
  padding: 1em;
  max-width: 6em;
  background: rgba(0, 0, 0, .2);
  text-align: center;
}

Is the click inside A or outside?
<div id="a">A
  <div id="b">B
    <div id="c">C</div>
  </div>
</div>

Вам потрібно обробити подію клацання на рівні документа. В об’єкті події у вас є targetвластивість, самий внутрішній елемент DOM, по якому клацнули. За допомогою цього ви перевіряєте себе і піднімаєте батьків до елемента документа, якщо один із них є вашим елементом спостереження.

Див. Приклад на jsFiddle

document.addEventListener("click", function (e) {
  var level = 0;
  for (var element = e.target; element; element = element.parentNode) {
    if (element.id === 'x') {
      document.getElementById("out").innerHTML = (level ? "inner " : "") + "x clicked";
      return;
    }
    level++;
  }
  document.getElementById("out").innerHTML = "not x clicked";
});

Як завжди, це не сумісно з поганим браузером через addEventListener / attachEvent, але працює так.

Клацають на дитину, коли це не event.target, але одним з батьків є спостережуваний елемент (я просто підраховую рівень для цього). Ви також можете мати логічне значення var, якщо елемент знайдено чи ні, щоб не повернути обробник з речення for. Мій приклад обмежується тим, що обробник закінчує лише тоді, коли нічого не збігається.

Додаючи сумісність між браузерами, я зазвичай роблю це так:

var addEvent = function (element, eventName, fn, useCapture) {
  if (element.addEventListener) {
    element.addEventListener(eventName, fn, useCapture);
  }
  else if (element.attachEvent) {
    element.attachEvent(eventName, function (e) {
      fn.apply(element, arguments);
    }, useCapture);
  }
};

Це сумісний з переглядачем код для приєднання прослуховувача / обробника подій, включаючи перезапис thisв IE, щоб бути елементом, як це робить jQuery для своїх обробників подій. Існує безліч аргументів, щоб мати на увазі деякі шматочки jQuery;)

Як щодо цього:

демонстрація jsBin

document.onclick = function(event){
  var hasParent = false;
    for(var node = event.target; node != document.body; node = node.parentNode)
    {
      if(node.id == 'div1'){
        hasParent = true;
        break;
      }
    }
  if(hasParent)
    alert('inside');
  else
    alert('outside');
} 

Щоб приховати елемент клацанням поза ним, я зазвичай застосовую такий простий код:

var bodyTag = document.getElementsByTagName('body');
var element = document.getElementById('element'); 
function clickedOrNot(e) {
	if (e.target !== element) {
		// action in the case of click outside 
		bodyTag[0].removeEventListener('click', clickedOrNot, true);
	}	
}
bodyTag[0].addEventListener('click', clickedOrNot, true);

Ще одним дуже простим і швидким підходом до цієї проблеми є відображення масиву pathв об'єкт події, повернутий слухачем. Якщо idабо classназва вашого елемента відповідає одному з елементів у масиві, клацання знаходиться всередині вашого елемента.

(Це рішення може бути корисним, якщо ви не хочете отримувати елемент безпосередньо (наприклад:, document.getElementById('...')наприклад, у програмі responsejs / nextjs, у ssr ..).

Ось приклад:

   document.addEventListener('click', e => {
      let clickedOutside = true;

      e.path.forEach(item => {
        if (!clickedOutside)
          return;

        if (item.className === 'your-element-class')
          clickedOutside = false;
      });

      if (clickedOutside)
        // Make an action if it's clicked outside..
    });

Сподіваюся, ця відповідь вам допоможе! (Повідомте мене, якщо моє рішення не є гарним рішенням або ви бачите щось для вдосконалення.)

Я провів багато досліджень щодо цього, щоб знайти кращий метод. Метод JavaScript. Містить рекурсивний перехід у DOM, щоб перевірити, чи містить він цільову чи ні. Я використовував його в одному з проектів реагування, але коли DOM реакції змінюється у встановленому стані, метод .contains не працює. ТАК Я придумав це рішення

//Basic Html snippet
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="mydiv">
  <h2>
    click outside this div to test
  </h2>
  Check click outside 
</div>
</body>
</html>


//Implementation in Vanilla javaScript
const node = document.getElementById('mydiv')
//minor css to make div more obvious
node.style.width = '300px'
node.style.height = '100px'
node.style.background = 'red'

let isCursorInside = false

//Attach mouseover event listener and update in variable
node.addEventListener('mouseover', function() {
  isCursorInside = true
  console.log('cursor inside')
})

/Attach mouseout event listener and update in variable
node.addEventListener('mouseout', function() {
    isCursorInside = false
  console.log('cursor outside')
})


document.addEventListener('click', function() {
  //And if isCursorInside = false it means cursor is outside 
    if(!isCursorInside) {
    alert('Outside div click detected')
  }
})

РОБОЧА ДЕМО jsfiddle