Solid цветной DIV внутри DIV с непрозрачностью; ONCLICK событие события - PullRequest
Новая
       54

Solid цветной DIV внутри DIV с непрозрачностью; ONCLICK событие события

0 голосов
/ 30 апреля 2020

У меня есть родительский DIV с позицией: исправлено; и непрозрачность: 0,7; и внутри него у меня есть ребенок DIV с цветом фона: белый;

enter image description here

Как использовать событие ONCLICK, при котором родительский DIV и дочерний DIV исчезают при нажатии только на черное пространство, которое вы видите?

Поскольку белый DIV вложен в родительский DIV с непрозрачностью, всякий раз, когда я щелкаю белый DIV, весь родительский DIV (черный непрозрачный DIV) исчезает ...

Мне нужны оба DIV исчезать при нажатии на черную непрозрачность ... а не при нажатии на белый DIV ...

1 Ответ

0 голосов
/ 30 апреля 2020

Я столкнулся с такой проблемой, когда создавал лайтбокс (модальный) и хотел использовать только 2 элемента: оверлей и контент (белый ящик). Та же структура, что и у вас. Итак, вот что вы можете сделать:

На вашем родительском элементе вы будете прослушивать щелчок, проверять, является ли выбранный элемент именно родителем, а не одним из его дочерних элементов, а затем скрывать его. Я буду применять это поведение к классу, поэтому вы просто добавляете класс в родительский элемент или настраиваете код в соответствии с вашими потребностями: 

document.querySelectorAll('.hide-on-click-exact').forEach(function(el) {
    el.addEventListener('click', function(e) {
      if (e.target === this) {
        el.style.display = 'none';
      }
    });
});

Итак, просто добавьте класс «hide-on-click-» точно в родительский div, и загрузите этот фрагмент где-нибудь после, и все готово. Идея проста: если целевой клик - это в точности элемент «.hide-on-click-точный», скройте его.

Примечание: будьте осторожны, не используйте функции стрелок для обратного вызова eventListener этого фрагмента, поскольку функции со стрелками не имеют области видимости, «this» больше не будет щелкаемым элементом, а окном.

...