logo标签列表

jQuery点击元素事件关闭

javascriptjqueryclick
44
我有一个浮动的div，当它被显示时，我希望在用户点击div以外的区域时将其隐藏。类似于.hover()函数在悬停在元素上时的回调，只不过我想使用点击事件。
我尝试在body上设置点击事件来隐藏div，但结果出乎意料。
有人有想法如何轻松实现这个功能吗？
5
请详细说明“导致了意外的结果”。 - Crescent Fresh
15个回答
0

我在一个论坛上找到了解决方案...但是我找不到原始作者来给予功劳。

这是修改后的版本（存在于我的代码中）。

 $(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锚点。

0
如果你不想隐藏通过点击自身来显示的元素：
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;
});
0

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

function popUp( element )
{
    element.onmousedown = function (event) { event.stopPropagation(); };
    document.onmousedown = function () { popDown( element ); };
document.body.appendChild( element );
}
function popDown( element )
{
    document.body.removeChild( element );
document.onmousedown = null;
}
-2
你需要监控整个页面的 mouseDown 事件，但是你需要注意当用户点击浮动 div 内部时。我建议在你的浮动 div 上添加一个 hover 事件，这样当用户悬停在上面时，mouseDown 会被忽略，但当它没有被悬停时，mouseDown 将关闭它。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接