закрыть div при щелчке за пределами области div

Question

У меня есть эта часть кода. Я пытаюсь закрыть div, когда вы нажимаете вне Div, я просматривал этот форум, но не могу найти решение. Вот скрипка, Demo

$('#hideshow1').on("click", function() { 
    var text = $(this).val(); 
    $("#req").toggle(); 

}); 

$(window).on("click keydown", function(e) { 
    //e.preventDefault() /*For the Esc Key*/ 
    if (e.keyCode === 27 || !$(e.target).is(function() {return $("#req, #hideshow1")})) { 
    $("#req").hide() 
    } 
}).focus() 

Answer 1

Div req ширина 100% экрана. Ширина frame такая же, как и граница.

$('#hideshow1').on("click", function() { 
 
    if ($("#frame").is(":visible") == false) { 
 
    $("#frame").show(); 
 
    } 
 
    $('#hideshow1').text("Click outside div to hide it."); 
 
}); 
 
$(document).mouseup(function(e) { 
 
    var container = $("#frame"); //Used frame id because div(req) width is not the same as the frame 
 
    if ($("#frame").is(":visible")) { 
 
    if (!container.is(e.target) //check if the target of the click isn't the container... 
 
     && container.has(e.target).length === 0) { 
 
     container.hide(); 
 
     $('#hideshow1').text("Click to see div"); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="clickme"> 
 
    <a class="req_pic_link" id="hideshow1">Click outside div to hide it.</a> 
 
</div> 
 
<div id="req"> 
 
    <iframe id="frame" src="https://www.google.com"></iframe> 
 
</div>

Answer 2

Пожалуйста, проверьте это.

$('html').click(function() { 
    $("#req").hide(); 
    // add some code 
}); 

$('#clickme').click(function(event) { 
    event.stopPropagation(); 
    // add some code 
}); 

Тест код здесь jsfiddle

Answer 3

Функция аргумент .is() используется для проверки каждого элемента в наборе, и должна возвращать логическое значение, чтобы ли элемент спичек или нет - он не должен возвращаться коллекция jQuery.

Однако для того, что вы пытаетесь сделать, вы должны пройти только селектор вместо функции .is(), как это:

if (e.keyCode === 27 || !$(e.target).is("#req, #hideshow1")) { 
    $("#req").hide() 
} 

Вот рабочий jsFiddle. (Обратите внимание, что это не будет работать, если вы нажмете справа от DIV, но это потому, что вы все еще нажав на #req, потому что он не имеет определенной ширины.)

Answer 4

Вам нужно добавить событие щелчка к документу и убедитесь, что щелкнул цель и любой из его родителя не имеют необходимый класс:

$(document).on('click', function (e) { 
 
    var divClass = 'my-class'; 
 
    if (!$(e.target).hasClass(divClass) && !$(e.target).parents().hasClass(divClass)) { 
 
    // do something... 
 
    } 
 
});