Как закрывать выпадающее меню при клике вне его самого?

Question

[Сашка Брамс]

Есть такое меню:


Все хорошо сделал открывается, но вот проблема, как сделать чтобы если клик вне меню то окно закрывалось, а когда внутри то ничего не происходило ?

сделал

document. body. addEventListener ('click', closeAll, false);

И тут проверяю открыто ли окно, если да закрываю, если нет иду дальше
и так все выпадающие меню...

Но проблема в том, что клик даже внутри списка по "Пункт 1/2" Приводит к закрыванию всех выпадающих списков, (открыт может быть только 1, если нажал на 2, то первый закроется)

Как быть, помогите пожалуйста?

Менял местами евенты (обработку и повеску event'ov)
все также..

Answer 1

[Ernest Faizullin]

function clickOutside (el) {
	$(document).on('click', function(event) {
		event.stopPropagation();
		if ($(event.target).is(el)) return;

		console.log('Клик мимо меня');
	});
}

upd:

function clickOutside (selector) {
	document.addEventListener('click', function (event) {
		event.stopPropagation();
		var el = document.querySelector(selector);
		if (event.target === el) return;

		console.log('Не попал =)');
	});
}

upd:

function findParentBySelector(elm, selector) {
    var all = document.querySelectorAll(selector);
    var cur = elm.parentNode;
    while(cur && !collectionHas(all, cur)) {
        cur = cur.parentNode;
    }
    return cur;
}

function clickOutside (selector) {
	document.addEventListener('click', function (event) {
		event.stopPropagation();
		var el = document.querySelector(selector);
		if (event.target == el) return;

    // Проверка на то что это дочерний элемент
    if (event.target == findParentBySelector(selector)) return;

		console.log('Не попал =)');
	});
}

Comments

[Сашка Брамс]

я не особо силен в jquery, и в частности в js,
Как это выглядело бы на нативном js ?

document.addEventListener('click', function(event){ event.stopPropagation(); menuOpenfunc(); console.log('мимо'),false);
примерно так?

[Ernest Faizullin]

Сашка Брамс: нативный добавил, но там возможно придется поправлять, не уверен что event.target и el должны быть строго равны)

[Сашка Брамс]

Ernest Faizullin: Спасибо большое)

[Сашка Брамс]

Ernest Faizullin Извиняюсь, столкнулся с проблемой, когда кликаю на дочерний элемент, event.target не равен el, как это можно обойти?

[Ernest Faizullin]

Сашка Брамс: попробуй убрать event.stopPropagation();

[Ernest Faizullin]

Сашка Брамс: добавил еще проверку на дочерние элементы

[Сашка Брамс]

Ernest Faizullin: Извиняюсь, я что-то совсем запутался...

откуда вызывать clickOutside(selector) ?

[SMax30033]

У меня не сработал этот код.

Answer 2

[Николай]

Основная идея: у класса event в javascript есть свойство target. Он содержит ссылку на тот DOM элемент, на котором этот event произошел. В таких случаях как у вас, можно проверять значение этого свойства прежде чем выполнять какие-то действия.

Answer 3

[everdimension]

Использовать e.stopPropagation() — плохая идея. Читайте

Правильный способ — проверять, является ли target сделанного клика элементом меню или чем-то другим. Если это не меню — закрывать меню.

Появляется правильный вопрос, что делать, если кликнутый элемент — дочерний элемент меню? Для этого есть офигенный метод node.contains()

Собственно, вся требуемая проверка получается совсем несложная — gist

var el = document.getElementById('el');

document.addEventListener('click', outsideEvtListener);

function outsideEvtListener(evt) {
    if (evt.target === el || el.contains(evt.target)) {
        // клик внутри
        return;
    }
    // код для закрытия меню, например el.classList.add('hidden')
   
    // не забыть убрать слушатель событий (не для каждой имплементации требуется)
    document.removeEventListener(outsideEvtListener);
}

Comments

[VegeMAN]

Спасибо! реально помог, очень лаконичный код получился.

[SMax30033]

Спасибо. Способ рабочий. Только он работает, если меню уже открыто. При клике вне меню, оно закрывается, что и хотелось сделать.
Но у меня открытие/закрытие меню сделано на чистом CSS. Применяя этот код, меню перестает открываться, оно постоянно скрыто (hidden).
Кто-нибудь может помочь? Код могу выложить куда скажите.

Answer 4

[Андрей]

на onclick в меню повесить обработчик event.preventDefault()

Comments

[Сашка Брамс]

вместе с тем что я уже имею( closeAll ) ?

[Сашка Брамс]

Он вообще отказывается открывать выпадающий список, т.к срабатывает сразу и открыть и закрыть все