jQuery点击关闭元素事件答案

【问题标题】：jQuery click off element eventjQuery点击关闭元素事件
【发布时间】：2010-11-28 06:18:50
【问题描述】：

我有一个显示的浮动 div，我希望在用户单击该 div 时隐藏它。这类似于悬停在元素上时的 .hover() 函数回调。只有我想为点击执行此操作。

我尝试只为 body 设置一个点击事件，这会隐藏 div，但这会产生意想不到的结果。

有人对我如何轻松做到这一点有想法吗？

【问题讨论】：

请详细说明“产生了意想不到的结果”。

标签： javascript jquery click

【解决方案1】：

这对我有用，

var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
      if(mouseOver == false) {
           $("#divToHide").hide();
      }
});

【讨论】：

【解决方案2】：

     $('body').click(function (event) {        
if ($("#divID").is(':visible')) {
            $('#divID').slideUp();
        }
});

这可以用来检查div是否可见，如果可见，则将对象向上滑动。

【讨论】：

【解决方案3】：

这是一个处理点击事件的函数，我将弹出窗口的选择器和 jquery 元素提供给它。作为一个 jquery 插件可能会更好，但这很简单。

clickOut = function(selector, element) {
 var hide = function(event) {
  // Hide search options if clicked out
  if (!$(event.originalEvent.target).parents(selector).size())
   $(element).hide();
  else
   $(document).one("click",hide);
 };

 $(document).one("click", hide);
};

所以如果你有一个像<div class='popup'>test</div> 这样的弹出元素，你可以使用我的函数，比如clickOut("div.popup", $("div.popup"));

【讨论】：

【解决方案4】：

最好的方法是：-

$(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("divtohide")) { $(".divtohide").hide(); } });

【讨论】：

这是一个非常优雅的 :) 如果您使用的类是

【解决方案5】：

例如你点击一个链接元素来显示 div 菜单，你只需将模糊功能绑定到链接元素以隐藏 div 菜单

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})

【讨论】：

【解决方案6】：

如果您不想隐藏通过单击自身将显示的元素：

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});

【讨论】：

【解决方案7】：

我在论坛中找到了解决方案...但我找不到它以感谢原始作者。这是版本（在我的代码中进行了修改）。

 $(document).bind('mousedown.yourstuff', function(e) {
            var clicked=$(e.target); // get the element clicked                 
            if( clicked.is('#yourstuff')
                 || clicked.parents().is('#yourstuff')) {
                // click safe!
            } else {
                // outside click
                closeIt();
            }
        });

 function closeIt() {
        $(document).unbind('mousedown.emailSignin');
        //...
}

我还有 ESC 键绑定和上图中未显示的“关闭”html 锚。

【讨论】：

【解决方案8】：

在文档上使用事件处理程序对我来说效果很好：

函数弹出（元素） { element.onmousedown = function (event) { event.stopPropagation(); }; document.onmousedown = function () { popDown( element ); }; document.body.appendChild( 元素 ); } 函数弹出（元素） { document.body.removeChild( 元素 ); 文档.onmousedown = null; }

【讨论】：

【解决方案9】：

如果您使用的是 Jquery，则可以使用如下选择器：

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});

【讨论】：

对不起 - 应该如下： $("*:not(#myTrigger)").live("click", function(){ $("#myDiv").hide(); });
谁投了反对票，为什么？这对我来说非常有效。谢谢！
这不是将点击侦听器附加到不是#myDiv 的每个元素吗？似乎比简单的 $('body') 更大的浏览器内存负担。

【解决方案10】：

你可以试试这个。 http://benalman.com/projects/jquery-clickoutside-plugin/

【讨论】：

【解决方案11】：

这是一个成熟的事件驱动方法

自定义事件处理图层的“召唤”和“解散”，以免影响其他基于点击的事件
document.body 仅在相关图层实际可见时才侦听关闭事件

Zee 码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  var $layer = $('#layer');
  var $body  = $('html');

  $layer
    .bind( 'summon', function( e )
    {
      $layer.show();
      $body.bind( 'click', dismissLayer );
    } )
    .bind( 'dismiss', function( e )
    {
      $layer.hide();
      $body.unbind( 'click', dismissLayer );
    } )
    .click( function( e )
    {
      e.stopPropagation();
    })
    .trigger( 'dismiss' )
  ;

  function dismissLayer( e )
  {
    $layer.trigger( 'dismiss' );
  }

  // This is optional - this just triggers the div to 'visible'
  $('#control').click( function( e )
  {
    var $layer = $('#layer:hidden');
    if ( $layer.length )
    {
      $layer.trigger( 'summon' );
      e.stopPropagation();
    }
  } );
});

</script>

<style type="text/css">
#layer {
  position: absolute;
  left: 100px;
  top: 20px;
  background-color: red;
  padding: 10px;
  color: white;
}
#control {
  cursor: pointer;
}
</style>

</head>
<body>

<div id="layer">test</div>
<span id="control">Show div</span>

</body>
</html>

我知道的代码很多，但这里只是为了展示一种不同的方法。

【讨论】：

【解决方案12】：

您确定要查找blur 事件吗？

【讨论】：

sigh 有人想解释一下这次否决票吗？（或所有这些反对票？）
blur 事件仅适用于表单元素，提问者可能正在为非表单元素寻找类似的东西。
这不是真的完全 - quirksmode.org/dom/events/blurfocus.html
这实际上很优雅——谢谢你 annakata。 $(".modal_div").live("blur", function(){$(this).hide();});
很高兴它对某人有用。缺乏涉及模糊的答案让我感到困惑。

【解决方案13】：

另一个可能更简单的选项是在浮动 DIV 和页面其余部分之间添加一个透明 div。

透明 DIV 上的简单点击事件可以处理隐藏，它可以避免您遇到的点击事件问题。

【讨论】：

好主意。我过去曾为不同的情况做过类似的事情。感谢您让我注意到这一点。
欢迎您，感谢您接受答案。我几乎没有发布，因为我真的不知道你在设计什么，并且认为该选项可能不起作用 - 但有时局外人的观点是解决问题的最佳方式。祝你好运！
这怎么比 DavidB 的回答简单？
我称它为更简单的解决方案，因为 Nic 在使用 body 上的点击事件时报告了意外结果。我的解决方案可能不如 DavidB 的那么优雅，我对 JQuery 的熟练程度也不高，但只需等待隐藏 DIV 上的单击事件即可完成工作。我只是抛出另一个选择让他考虑......
@PhillFox 刚刚通过 Google 偶然发现了这一点，并认为我会发表评论。 PhillFox 解决方案的优点是透明 div 将阻止任何实际的链接或按钮点击。有时，如果显示浮动 div，用户只需随机单击 div 即可使其消失。透明的 div 可以防止任何误点击，而 DavidB 的解决方案则不能。

【解决方案14】：

您将需要监视整个页面的mouseDown 事件，但您必须注意用户在浮动 div 内单击时的情况。

我建议在您的浮动 div 中添加一个悬停事件，这样当用户悬停在它上面时，mouseDown 会被忽略，但当它没有悬停在 mouseDown 上时会关闭它

【讨论】：

【解决方案15】：

如果您想在单击页面中的其他位置时清除 div，您可以执行以下操作：

$('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});

【讨论】：

这是唯一适合我的情况。谢谢！
.closest 方法返回一个 jQuery 对象。如果它没有找到任何东西，它会返回一个空的 jQuery 对象。 .length 只是确定是否找到任何东西的好方法，因为 0==false 和 1==true，而 jQuery 对象无论是否为空都是“true”。
这太棒了，我花了 2-3 天寻找答案。这行得通！快速提问，这对每次点击时调用的性能有何影响。
这很好用。将此添加到触发器中。 (!$(event.target).closest('#myDiv').length && !$(event.target).closest('#trigger').length )