Модальная реализация, которая не закрывается при отпускании мыши на заднем плане (но только при нажатии на задний фон)

Question

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

ЭтоНебольшая демонстрация на w3schools показывает проблему.https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

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

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Как это должно быть реализовано, чтобы он закрывался при нажатии на фон, но НЕ при выборе текста, как показано на скриншоте выше.

Answer 1

Один из способов добиться этого - изменить слушателя с onclick на onmousedown. Объяснение состоит в том, что слушатель сработает, когда вы начнете щелкать, поэтому не имеет значения, куда вы двигаетесь дальше.

window.onmousedown = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Редактировать

Если вы действительно хотите скрыть модальный режим после того, как пользователь отпустил мышь, вы можете сохранить источник щелчка при нажатии «вниз» и скрыть его при нажатии «вверх». Хотя в этом случае модальное окно будет скрыто, если пользователь начинает щелкать вне модального окна и отпускает мышь в модальном режиме.

var clickOnModal = false;
window.onmousedown = function(event) {
  clickOnModal = event.target == modal;
}
window.onmouseup = function() {
  if (clickOnModal) {
    modal.style.display = "none";
  }
}