我的元素中有一个小问题 - 我有一个在按下背景时关闭的模式。问题是,例如,如果我按住鼠标选择文本并将鼠标拖出模式,当我释放它时,模式关闭,因为背景已被“按下”。
w3schools 上的这个小演示展示了这个问题。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
在这个小演示中,点击背景时关闭模式的代码显然是这个函数:
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
如何实现它才能在按下背景时关闭,而不是在选择文本时关闭,如上面的屏幕截图所示。
最佳答案
实现此目的的一种方法是将监听器从 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";
}
}
关于javascript - 在背景上释放鼠标时不关闭的模态实现(但仅在单击背景时),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55493865/