我正在使用这段代码:
$('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和当他们不再工作时，点击。
当前回答
这样不行吗?
$("body *").not(".form_wrapper").click(function() {
});
or
$("body *:not(.form_wrapper)").click(function() {
});
其他回答
遇到同样的问题，就想出了这个简单的解决方法。它甚至可以递归工作:
$(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();
}
});
$(document).ready(function() {
$('.headings').click(function () {$('#sub1').css("display",""); });
$('.headings').click(function () {return false;});
$('#sub1').click(function () {return false;});
$('body').click(function () {$('#sub1').css("display","none");
})});
我觉得这样会容易得多。我是这样做的:
$(':not(.form_wrapper)').click(function() {
$('.form_wrapper').hide();
});
您可以将tabindex设置为父元素<div>，而不是监听DOM上的每一次单击以隐藏一个特定的元素，并监听focusout事件。
设置tabindex将确保在<div>上触发模糊事件(通常不会)。
所以你的HTML看起来是这样的:
<div class="form_wrapper" tabindex="0">
<a class="agree" href="javascript:;">I Agree</a>
<a class="disagree" href="javascript:;">Disagree</a>
</div>
你的JS:
$('.form_wrapper').on('focusout', function(event){
$('.form_wrapper').hide();
});
(只是添加到prc322的答案。)
在我的例子中，我使用这段代码来隐藏当用户单击适当的选项卡时出现的导航菜单。我发现添加一个额外的条件很有用，即容器外的点击目标不是链接。
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!$("a").is(e.target) // if the target of the click isn't a link ...
&& !container.is(e.target) // ... or the container ...
&& container.has(e.target).length === 0) // ... or a descendant of the container
{
container.hide();
}
});
这是因为我网站上的一些链接为页面添加了新内容。如果在添加新内容的同时导航菜单消失了，用户可能会迷失方向。
