我正在使用这段代码:
$('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和当他们不再工作时，点击。
当前回答
你能做的就是将一个点击事件绑定到文档中，如果下拉菜单外的东西被点击，它就会隐藏下拉菜单，但是如果下拉菜单内的东西被点击，它就不会隐藏，所以你的“show”事件(或slidedown或任何显示下拉菜单的东西)
$('.form_wrapper').show(function(){
$(document).bind('click', function (e) {
var clicked = $(e.target);
if (!clicked.parents().hasClass("class-of-dropdown-container")) {
$('.form_wrapper').hide();
}
});
});
然后在隐藏它时，取消绑定单击事件
$(document).unbind('click');
其他回答
您可能希望检查为主体触发的click事件的目标，而不是依赖于stopPropagation。
喜欢的东西:
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
此外，body元素可能不包括浏览器中显示的整个视觉空间。如果您注意到您的点击没有注册，您可能需要为HTML元素添加点击处理程序。
甚至溶化:
$("html").click(function(){
$(".wrapper:visible").hide();
});
我在一个搜索框上工作，根据处理的关键字显示自动完成。当我不想点击任何选项，然后我将使用下面的代码隐藏处理的列表，它的工作。
$(document).click(function() {
$('#suggestion-box').html("");
});
建议框是我的自动完成容器，我显示的值。
在弹出窗口中使用接受的答案时，可能会遇到一些问题。在某些情况下，点击一个随机位置可能会导致不必要的操作，即错误地单击一个按钮可能会将您带到一个新页面。
我不确定这是否是最有效的解决方案，但为了防止这种情况，我建议使用屏幕掩码。确保屏幕掩码位于<body>标签的正下方，这样它就可以覆盖所有的屏幕宽度:100%;高度:100%。还要注意，它的z-index: 99高于所有元素。如果你想让另一个项目或div在屏幕掩码激活时可点击，只需为该项目或div分配更高的z-index。
屏幕掩码最初是不显示的(display:none)，当单击(onclick="hidemenu()")时，它调用一个hide函数。
<body>
<div class="screenmask" onclick="hidemenu()" style="position:fixed; width: 100%; height: 100%; top: 0px; right: 0px; display: none; z-index: 99;"></div>
处理“同一页面上多个不同弹出菜单”的javascript函数可能如下所示:
<script>
// an element with onclick="showmenu('id_here')" pops a menu in the screen
function showmenu(id) {
var popmenu = document.getElementById(id); // assume popmenu is of class .cardmenu
$('.cardmenu').hide(); // clear the screen from other popmenus first
$(popmenu).show(); // pop the desired specific menu
$('.screenmask').show(); // activate screenmask
}
function hidemenu() { // called when clicked on the screenmask
$('.cardmenu').hide(); // clear the screen from all the popmenus
$('.screenmask').hide(); // deactivate screenmask
}
</script>
将点击事件附加到表单包装器外的顶级元素，例如:
$('#header, #content, #footer').click(function(){
$('.form_wrapper').hide();
});
这也适用于触摸设备，只是要确保你的选择器列表中没有包含.form_wrapper的父类。
