我正在使用这段代码:
$('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).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();
});
其他回答
摘自https://sdtuts.com/click-on-not-specified-element/
现场演示http://demos.sdtuts.com/click-on-specified-element
$(document).ready(function () {
var is_specified_clicked;
$(".specified_element").click(function () {
is_specified_clicked = true;
setTimeout(function () {
is_specified_clicked = false;
}, 200);
})
$("*").click(function () {
if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
$(".event_result").text("you were clicked on specified element");
} else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
$(".event_result").text("you were clicked not on specified element");
}
})
})
这是我在另一个线程上找到的jsfiddle，也可以使用esc键:http://jsfiddle.net/S5ftb/404
var button = $('#open')[0]
var el = $('#test')[0]
$(button).on('click', function(e) {
$(el).show()
e.stopPropagation()
})
$(document).on('click', function(e) {
if ($(e.target).closest(el).length === 0) {
$(el).hide()
}
})
$(document).on('keydown', function(e) {
if (e.keyCode === 27) {
$(el).hide()
}
})
根据文档，.blur()不仅仅适用于<input>标记。例如:
$('.form_wrapper').blur(function(){
$(this).hide();
});
将点击事件附加到表单包装器外的顶级元素，例如:
$('#header, #content, #footer').click(function(){
$('.form_wrapper').hide();
});
这也适用于触摸设备，只是要确保你的选择器列表中没有包含.form_wrapper的父类。
这么多答案我都用不上。相反，我采取了公认的答案(工作得很好)，并缩短为以下(使用后代选择器):
$(document).mouseup(function(e)
{
if (!$(e.target).is("#targetSelector,#targetSelector *")) {
$('#targetSelector').hide();
}
});
因为它只以用户交互的速度运行，没有给变量赋值
