Как отследить клик вне определенного элемента?

Question

[MdaUZH]

Снова поднят старый вопрос, почитал тут уже были такие, но четкого ответа нет..
+ я вообще мало понимаю в js, но думаю разобраться по тихоньку смогу.

Суть вопроса.

Подскажите как определить клик вне определенного элемента?
например есть div, у него много дочерних элементов, и при клике вне его самого, нужно его подвинуть.

Вся проблема в клике по самому диву, а точнее по его дочерним

Небыло бы дочерних было бы проще, сравнил себе event.target и доволен, но нет..

Как узнать что клик произошел по самому элементу или 1 из его дочерних( много уровней вложенности)
?

Подскажите пожалуйста, буду очень благодарен если прокомментируйте свой код, так будет на много легче разобраться, спасибо большое)

Answer 1

[Петр]

if ($(e.target).parents().filter(menuelement).length){
  ...
}

Получаем множество элементов, что являются родительскими для элемента на котором был click и в этом множестве проверяем наличие нужного вам.

Comments

[MdaUZH]

Извиняюсь что сразу не указал, а как это будет выглядеть на чистом js ?

[trushka]

и тут лучше не parents(), a closest() указывать, а аргументом как раз нужный элемент указать, т.е. if ($(e.target).closest(menuelement)[0]) return; в начале обработчика - завершит функцию, если клик на элементе или его детях

Answer 2

[trushka]

Ну, на чистом js, чтоб меньше кода, можно просто на элемент обработчик повесить, в котором исполняется метод event.stopPropagation(), предотвращающиё всплытие. Тогда на document, например, вешается нужный обработчик, и он тупо не сработает, если клик будет на вашем элементе, так как на нём обработчик, отменяющий "всплытие"

Comments

[kinton]

А что делать, если таких окон несколько? Если остановить всплытие для одного, то, при нажатии на него, не сработает действие на документе и не закроется другой блок, например.

[trushka]

kinton, ну, можно как-то элемент "пометить", например, класс ему добавить, а потом в глобальном обработчике скрывать только непомеченные элементы не и убирать отметку

[kinton]

trushka: Написал вот такую вещь, надо передать id того элемента, при нажатии на который появляется сам блок, и id блока. getById == document.getElementById, реализую концепцию всплытия.

function showWindow(callerId, windowId) {
if (getById(windowId).classList.contains('hidden')) {
document.getElementById(windowId).classList.toggle('hidden');
setTimeout(function() {new WindowHider(callerId, windowId);}, 100);
} else {
document.getElementById(windowId).classList.toggle('hidden');
}
}

function WindowHider(cid, wid) {
document.addEventListener('click', captureForWindow);
function captureForWindow(e) {
e = e || event;
var checker = 0;
var a = e.target;
while (a != null) {
if (a.id == cid) {
checker = 1;
break;
}
a = a.parentNode;
}
if (checker != 1) {
a = e.target;
while (a != null) {
if (a.id == wid) {
checker = 1;
break;
}
a = a.parentNode;
}
if (checker == 0) {
if (!getById(wid).classList.contains('hidden')) {
getById(wid).classList.toggle('hidden');
document.removeEventListener('click', captureForWindow);
}
}
}
}
}