我正在使用此代码:
$('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中有链接,当单击它们时它们不再起作用。
遇到同样的问题,想出了这个简单的解决方案。它甚至可以递归工作:
$(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();
}
});
只需将其放在我的项目中,即可进行调整,使用数组元素一次遍历它们。jsfiddle.net/LCB5W
@mpelzsherman许多人评论说,该片段可在触摸设备上使用,但是自从帖子被编辑以来,这些评论就消失了。TBH我不知道我是否出于特定原因使用过“ mouseup”,但是如果它也可以与“ click”一起使用,我看不出为什么不应该使用“ click”。
我需要使用该事件隐藏一次容器,使用时应销毁此回调。为此,我在click事件上使用bind(“ click.namespace”)命名空间,并在事件发生时调用unbind(“ click.namespace”)。最后,我使用$(e.target).closest(“。container”)。length来识别容器...因此,我没有从此答案中使用任何技巧:D
记住要
$("YOUR CONTAINER SELECTOR").unbind( 'click', clickDocument );
在旁边使用.hide()
。因此document
,不要一直在听点击。为了获得最佳实践,我将
$(document).on("mouseup.hideDocClick", function () { ... });
在打开容器的函数和$(document).off('.hideDocClick');
hide函数中编写代码。使用名称空间,我不会删除mouseup
附加到文档的其他可能的侦听器。