我正在使用这段代码:
$('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');
其他回答
通过使用这段代码，您可以隐藏尽可能多的项目
var boxArray = ["first element's id","second element's id","nth element's id"];
window.addEventListener('mouseup', function(event){
for(var i=0; i < boxArray.length; i++){
var box = document.getElementById(boxArray[i]);
if(event.target != box && event.target.parentNode != box){
box.style.display = 'none';
}
}
})
您可能希望检查为主体触发的click事件的目标，而不是依赖于stopPropagation。
喜欢的东西:
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
此外，body元素可能不包括浏览器中显示的整个视觉空间。如果您注意到您的点击没有注册，您可能需要为HTML元素添加点击处理程序。
你最好这样写:
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();
});
});
$(document).click(function(event) {
if ( !$(event.target).hasClass('form_wrapper')) {
$(".form_wrapper").hide();
}
});
最流行的答案没有jQuery的解决方案:
document.addEventListener('mouseup', function (e) {
var container = document.getElementById('your container ID');
if (!container.contains(e.target)) {
container.style.display = 'none';
}
}.bind(this));
MDN: https://developer.mozilla.org/en/docs/Web/API/Node/contains
