这个一般类型的问题有几个答案,但它们都使用旧脚本或JQuery。
什么脚本"关闭"如果用户点击它外面的DIV?
例如,旧代码看起来像这样
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
我相信新代码的第一部分就是这样开始的。
document.addEventListener("click", modalOff);
但之后我就陷入了困境。
function modalOff() {
if (????) {
document.getElementByClassName('modal-a')[0].classList.remove('modal-b'); }
}
班级model-a
包含display: none;
课程modal-b
包括display:block;
删除modal-b
DIV消失。
但我无法理解如何告诉浏览器"如果用户点击DIV外部,请执行下一步操作。"我在检查什么?
答案 0 :(得分:1)
window.onclick = function(event) {
if (event.target != modal) {
modal.style.display = "none";
}
}
如你所说,如果不点击目标,你想要隐藏...
或者更一般:
function hideOnOutsideClick(el){
return function(event){
var modal=document.getElementById(el);
if (event.target != modal) {
modal.style.display = "none";
}
}
}
所以你可以这样做:
window.addEventListener("click",hideOnOutsideClick("someid"));
答案 1 :(得分:1)
在modalOff
函数中,您需要检查用户是否在模态中单击了模态或元素。所以你需要做这样的事情:
// check if you clicked on the modal or an object within the modal
var target = event.target;
while (target && target !== document.body && target !== modal) {
target = target.parentNode;
}
if (target !== modal) {
// close the modal here
}
如果用户点击了模态中的任何位置,那么在循环结束时,target === modal
;如果他们点击模态之外,那么target !== modal
。
答案 2 :(得分:1)
我假设您要使用addEventListener
来执行此操作。
//Add an event listener for the click event
document.addEventListener('click', closeModal)
//The function is called when the click is found, e is passed as the event variable
function closeModal(e) {
//Check if the click target is equal to the modal
if(e.target != modal)
#Code to hide modal
}
上面的代码应该可以解决问题。希望这会有所帮助。
" e"表示事件,当触发通气监听器时,它将事件对象传递给您调用的函数。这甚至有很多属性,例如在这种情况下点击的元素。它存储为" target"。