我正在使用这段代码:
$('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)
{
if (!$(e.target).is("#targetSelector,#targetSelector *")) {
$('#targetSelector').hide();
}
});
因为它只以用户交互的速度运行，没有给变量赋值
其他回答
你最好这样写:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
根据prc322的精彩答案构建。
function hideContainerOnMouseClickOut(selector, callback) {
var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
$(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
var container = $(selector);
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
$(document).off("mouseup.clickOFF touchend.clickOFF");
if (callback) callback.apply(this, args);
}
});
}
这增加了一些东西……
放置在带有“unlimited”参数的回调函数中 添加了对jquery的.off()的调用，与事件名称空间配对，以便在事件运行后将其从文档中解绑定。 包括触摸端移动功能
我希望这能帮助到一些人!
根据文档，.blur()不仅仅适用于<input>标记。例如:
$('.form_wrapper').blur(function(){
$(this).hide();
});
这么多答案，加一个肯定是一种通行权… 我没有看到当前(jQuery 3.1.1)的答案-所以:
$(function() {
$('body').on('mouseup', function() {
$('#your-selector').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();
}
});
