当用户点击它时,使用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

下一篇: How do I find out which DOM element has the focus?