Блог

Главная - Вопросы по программированию - Нажатие на раздел содержимого внутри раздела наложения также закрывает всплывающее окно

Нажатие на раздел содержимого внутри раздела наложения также закрывает всплывающее окно

#html #css #angularjs

Вопрос:

Я пытаюсь создать всплывающее окно, в котором контейнер представляет собой просто черный фон с некоторой непрозрачностью, а затем этот контейнер div содержит содержимое всплывающего окна.

В основном это выглядит примерно так:

 <button (click)="showPopup = !showPopup">Open popup</button>

<div class="overlay-bg" (click)="showPopup = !showPopup" [ngClass]="showPopup ? 'is-active' : ''">
 <div class="content">Some content</div>
</div>

CSS выглядит примерно так:

 .overlay {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  position: fixed;
  pointer-events: none;
  opacity: 0;

  amp;.is-active {
    opacity: 1;
    pointer-events: all;
  }

  .content {
    width: 400px;
    height: 400px;
    place-self: center;
    background: red;
  }
}

Таким образом, в основном, когда состояние неактивно, оно не отображается, а когда is-active оно включено нажатием кнопки, отображается наложение содержимое. Теперь я также хотел бы, чтобы при нажатии на фон всплывающее окно закрывалось, что и происходит. Однако проблема в том, что всплывающее окно также закрывается, когда я просто нажимаю на содержимое, чего не должно быть, поскольку оно должно быть несколько интерактивным.

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

Комментарии:

1. Я не знаю, что это за синтаксис (click)="showPopup = !showPopup" , но если вы используете обычный javascript и добавляете обработчик событий, вы получите event параметр. Проверьте event.target , чтобы узнать, откуда произошло событие щелчка. if event.target === <overlay-bg-reference> тогда только выполняйте showPopup = !showPopup

2. Можете ли вы воспроизвести проблему в stackblitz и поделиться ею здесь?

Ответ №1:

Проблема

Причина, по которой это происходит, связана с потоком событий в javascript, который представляет собой порядок обработки событий. Это важно, когда есть вложенные элементы, например, с вашими двумя разделами («наложение-bg» и «содержимое»). Современные браузеры используют пузырение событий, что означает, что самый внутренний дочерний элемент обрабатывает событие первым. Затем событие «пузырится» и выходит наружу. В вашем случае div «содержимое» должен сначала обработать событие. Вы не хотите, чтобы всплывающее окно исчезало при нажатии на раздел «содержимое», но вы делаете это при нажатии на раздел «наложение-bg». Поэтому вы должны найти способ предотвратить появление пузырьков события, зафиксировав его с помощью события onclick в разделе «содержимое». Это можно сделать с помощью stopPropagation() метода объекта события.

Решение

Чтобы событие не всплывало вверх, когда пользователь нажимает на раздел «содержимое», добавьте обработчик события onclick в HTML:

  <div class="content" onclick="preventBubbling(event)">Some content</div>

Затем с помощью JavaScript вы можете использовать stopPropagation() метод объекта события, который передается в качестве параметра функции. Для достижения этой цели функция будет выглядеть следующим образом:

 function preventBubbling(event) {
    event.stopPropagation();
}

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

Метки: