我正在使用这段代码:
$('body').click(function() {
$('.form_wrapper').hide();
});
$('.form_wrapper').click(function(event){
event.stopPropagation();
});
这个HTML:
<div class="form_wrapper">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
问题是，我有链接在div和当他们不再工作时，点击。
当前回答
如果你点击.form_wrapper返回false:
$('body').click(function() {
$('.form_wrapper').click(function(){
return false
});
$('.form_wrapper').hide();
});
//$('.form_wrapper').click(function(event){
// event.stopPropagation();
//});
其他回答
var exclude_div = $("#ExcludedDiv");; 美元(文档).click(函数(e) { 如果(! exclude_div。Is (e.target)) //如果目标div不是一个你想排除然后添加类隐藏 $ (" .myDiv1 ") .addClass(“隐藏”); })；
小提琴
现场演示
检查单击区域不在目标元素中，也不在它的子元素中
$(document).click(function (e) {
if ($(e.target).parents(".dropdown").length === 0) {
$(".dropdown").hide();
}
});
更新:
jQuery停止传播是最好的解决方案
现场演示
$(".button").click(function(e){
$(".dropdown").show();
e.stopPropagation();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".dropdown").hide();
});
为我工作在所有设备上(2023);)
<section class="form-wrapper">
<div class="popup-container">
Popup Me
</div>
</section>
$('.form-wrapper').on('click', function(e) {
var pop_container = $(".popup-container");
// if the target of the click isn't the pop_container nor a descendant of the pop_container
if (!pop_container.is(e.target) && pop_container.has(e.target).length === 0) {
//you action here
pop_container.hide();
}
});
遇到同样的问题，就想出了这个简单的解决方法。它甚至可以递归工作:
$(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();
}
});
我觉得这样会容易得多。我是这样做的:
$(':not(.form_wrapper)').click(function() {
$('.form_wrapper').hide();
});
