jQuery 在外部单击时隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11545518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide a div when clicked outside of it
提问by Gooey
This question has been asked multiple times, however none of the answers seem to work for me.
这个问题已被问过多次，但似乎没有一个答案对我有用。
The css of the div is as follows:
div的css如下：
#info{
display: none;
position: fixed;
z-index: 500;
height: 50%;
width: 60%;
overflow: auto;
background: rgba(187, 187, 187, .8);
}
I tried to use the following code:
我尝试使用以下代码：
$("#info").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$("#info").hide();
});
as well as this code:
以及此代码：
$(document).mouseup(function (e){
var container = $("#info");
if (container.has(e.target).length === 0) {
container.hide();
}
});
Yet whenever i click on the div it also disappears, no clue why but it does.
Any thing else that might work?
然而，每当我点击 div 它也会消失，不知道为什么，但它确实存在。
还有什么可能有效吗？
回答by thecodeparadox
As your target has id=info, so you can try:
由于您的目标有id=info，因此您可以尝试：
$(document).click(function(e) {
// check that your clicked
// element has no id=info
if( e.target.id != 'info') {
$("#info").hide();
}
});
You can also try:
你也可以试试：
$(document).click(function() {
if( this.id != 'info') {
$("#info").hide();
}
});
According to comment
根据评论
$(document).click(function(e) {
// check that your clicked
// element has no id=info
// and is not child of info
if (e.target.id != 'info' && !$('#info').find(e.target).length) {
$("#info").hide();
}
});
回答by RobB
Attach an onclickevent handler to the documentobject:
将onclick事件处理程序附加到document对象：
$(document).click(function(e) {
if(e.target.id != 'info') {
$("#info").hide();
}
});
Demo: http://jsfiddle.net/aUjRG/
演示：http: //jsfiddle.net/aUjRG/
Here is a solution in pure JavaScript to help you better understand what it happening:
这是一个纯 JavaScript 的解决方案，可帮助您更好地理解发生了什么：
function hideInfo(){
if(window.event.srcElement.id != 'info'){
document.getElementById('info').style.display = 'none';
}
}
document.onclick = hideInfo;
Demo: http://jsfiddle.net/mmzc8/
演示：http: //jsfiddle.net/mmzc8/
Both solutions will check if the location that the user clicked was on the element with an ID of info. Assuming that the user did not click on the infoelement, then hide the infoelement.
两种解决方案都将检查用户单击的位置是否位于 ID 为 的元素上info。假设用户没有点击该info元素，则隐藏该info元素。
回答by Andy Lorenz
To ensure you have a solution that works on iPads too, then you need to use the following function trigger instead:
为确保您的解决方案也适用于 iPad，您需要改用以下函数触发器：
$(document).on("mousedown touchstart",function(e){
var $info = $('#info');
if (!$info.is(e.target) && $info.has(e.target).length === 0) {
$info.hide();
}
});
Similarly, if you are looking to cover off mouseup, add 'touchend':
同样，如果您想掩盖 mouseup，请添加“touchend”：
$(document).on("mouseup touchend",function(e){
...
});
回答by Ken Avila
Try this code, this is the best for me.
试试这个代码，这对我来说是最好的。
jQuery('.button_show_container').click(function(e) {
jQuery('.container').slideToggle('fast');
e.stopPropagation();
});
jQuery(document).click(function() {
jQuery('.container').slideUp('fast');
});
回答by Ahmad.Iftikhar
You can add a class only for check on mouse click that specific div or any within that div element clicked or not.
您可以添加一个类，仅用于检查鼠标单击该特定 div 或该 div 元素中的任何内容是否被单击。
$(document).click(function(e){
if ( !$(e.target).hasClass("[class name for check]") &&
$("[element class or id]").css("display")=="block" ) {
//...code if clicked out side div
}
});
回答by Sam G
Try the below solution. It's even working recursive:
尝试以下解决方案。它甚至可以递归工作：
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
Reference - https://stackoverflow.com/a/7385673/3910232
