在背景上释放鼠标时（但仅在单击背景时），模态实现不会关闭

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";
  }
}