当用户点击它时,使用jQuery隐藏DIV
我正在使用此代码:
$('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();
}
});
你最好去这样的事情:
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();
});
});
您可能需要检查为身体启动的点击事件的目标,而不是依靠stopPropagation。
就像是:
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
而且,body元素可能不包含浏览器中显示的整个可视空间。 如果您注意到您的点击未注册,则可能需要添加HTML元素的点击处理程序。
链接地址: http://www.djcxy.com/p/14627.html上一篇: Use jQuery to hide a DIV when the user clicks outside of it