Как отследить клик на блок и на все его дочерние элементы JS?

Question

Столкнулся с проблемой.

Сделал событие клика на весь документ $(document).click... Которое закрывает модальное окно по клику вне площади окна, но когда я кликаю на дочерние элементы всё равно происходит закрытие.

Например смоделируем ситуацию:

<form class="modal_form-container">
    <input/>
    <button>принять</button>
</form>



$(document).click(function (e) {
    if (!$(e.target).is('.modal_form-contaner')) {
        closeModal();
    }
});

По клику на input и на button всё равно модальное окно закрывается, как это исправить?

Answer 1

Например так! Добавляем нужным элементам атрибут для опознавания(я захотел data-hide, можете придумать свой)

<form class="modal_form-container">
    <input data-hide />
    <button data-hide>принять</button>
</form>

Ну и в функции реализовал проверку(Есть ли данный атрибут у элемента, на который ткнули мышкой)

$(document).click(function (e) {
    if (!e.target.hasAttribute('data-hide')) {
        closeModal();
    }
});

БЛОГ НА HUSL

Как отследить клик на блок и на все его дочерние элементы JS?

Ответы (1 шт):