模态不会关闭在移动

Question

我使用JS模态（没有jQuery的），因为我有一些问题，这种做法......

一切正常，只是在移动用户良好的不能关闭它。

var modal = document.getElementById('myModal'); 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
}; 

这可能与该触摸我失踪...

我试着用这样的jQuery：

$(document).ready(function(){ 
    $(modal).on('click touchstart', function() { 
     modal.style.display = "none"; 
    }); 
}); 

这里的问题是，如果里面的用户点击它也将消失...

我需要的是当用户只在外面点击时，模态应该消失...

任何想法我该如何解决这个问题？

谢谢。

Answer 1

，而不是目标点击注册，注册的文档，然后检查，看看鼠标是不是目标

$(document).on ('mouseup touchstart', function (e) 
{ 
    var container = $("#myModal"); 

    if (!container.is(e.target) // if the target of the click isn't the container... 
     && container.has(e.target).length === 0) // ... nor a descendant of the container 
    { 
     container.hide(); 
    } 
}); 

Answer 2

您是否尝试过使用contains里面？

我只是测试它在iOS Safari和Chrome，它工作正常

请查看演示，

当你点击黄色部分，它仍然存在

然而

，当你点击粉部分，整个模式将隐藏

JS Bin

代码JS斌

var pa = document.querySelector('#modal-overlay'); 
var ch = document.querySelector('#modal-container'); 

pa.addEventListener('click', function(e) { 
    if (!ch.contains(e.target)) { 
    pa.style.display = 'none'; 
    } 
}); 

Answer 3

您可以在文档上侦听“mousedown”事件，然后检查模态是否在事件路径中。如果不是，则隐藏模式。如果是，那就什么也不做。

var myModal = document.getElementById('myModal'); 
 

 
document.addEventListener('mousedown', function(e) 
 
{ 
 
    if (e.path.indexOf(myModal) == -1) 
 
    myModal.hidden = true; 
 
});