jQuery单击元素事件

我有一个浮动div显示，并且我希望它在用户单击div时隐藏。这与悬停元素时的.hover（）函数回调相似。只有我想这样做点击。jQuery单击元素事件

我试着设置一个点击事件的身体，这将隐藏分区，但这给了意想不到的结果。

任何人都有想法，我怎么可以轻松地做到这一点？

来源

2009-09-14 Nic Hubbard

请详细说明“那给了意想不到的结果”。 – 2009-09-14 20:17:36

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

透明DIV上的一个简单的单击事件可以处理隐藏，并且可以避免遇到单击事件时遇到的问题。

来源

2009-09-14 20:40:00 PhillFox

好主意。在过去的情况下，我做过类似的事情。感谢您将此引起我的注意。 – 2009-09-14 20:43:23

欢迎您，并感谢您接受答案。我几乎没有发布信息，因为我不知道你在设计什么，并认为这种方案可能行不通 - 但有时候，外部人的观点是解决问题的最好方法。祝你好运！ – PhillFox 2009-09-14 22:38:26

这比DavidB的答案简单吗？ – JPot 2009-09-15 02:22:37

如果你想清楚，当你点击其他地方在页面中的div，你可以这样做：

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

来源

2009-09-14 20:25:47

真棒，谢谢 – HappyDeveloper 2011-04-12 19:58:36

这是唯一一个适合我的情况。谢谢！ – Jurgen 2011-09-20 07:44:44

什么是'.length'？ – pruett 2012-02-22 19:04:28

-2

你将需要监控的mouseDown事件整个页面，但当用户点击浮动div时，你必须注意。

我建议增加悬停事件到您的浮动DIV因此当用户盘旋在它，mouseDown忽略不计，但是当它不被上空盘旋mouseDown将关闭它

来源

2009-09-14 20:27:28 idrumgood

当然，您正在寻找blur活动？

来源

2009-09-14 20:43:19 annakata

*叹*任何人都想解释downvote？（或所有这些downvotes？） – annakata 2009-09-17 16:35:26

“模糊”事件只适用于表单元素，提问者可能正在寻找类似于非表单元素的东西。 – 2009-10-20 13:44:44

好吧，这是不正确的* - http://www.quirksmode.org/dom/events/blurfocus.html – annakata 2009-10-20 18:33:31

这里有一个完整的事件驱动方式

自定义事件处理的“召唤”，该层的“驳回”，以不会在其他基于点击的事件
文件的脚趾步骤。体听取了解雇事件仅当有问题的层实际上是可见

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>

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

来源

2009-09-14 21:25:07

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

来源

2010-03-01 22:17:05 rado

如果你使用jQuery，您可以使用这样一个选择：

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

来源

2010-04-06 21:10:48 Kelly

对不起 - 应该是以下内容： $（“*：not（#myTrigger）”）。live（“click”，function（）{ $（“＃myDiv”）。hide ）; }）; – Kelly 2010-04-07 18:35:55

谁投下了，为什么？这对我来说非常合适。谢谢！ – 2010-08-10 03:35:56

这是不是附加一个点击监听器*不是#myDiv的每一个*元素？似乎比单纯的$（'body'）更大的浏览器内存负担。 – 2012-12-10 12:49:27

使用的文档的事件处理程序很适合我：

 
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; 
}

来源

2010-06-09 05:39:38 Gali

这是一个功能为了处理点击事件，我给它提供了弹出选择器和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"));

来源

2010-10-05 16:01:14 user467043

的最佳方式弹出元素来做到这一点： -

  
$(document).bind('click', function(e) { 

var $clicked = $(e.target); 

    if (!$clicked.parents().hasClass("divtohide")) { 
     $(".divtohide").hide(); 
    } 

});

来源

2010-11-03 13:18:37

这是一个不错的优雅的:)如果你使用的是类 – Prof83 2011-03-11 22:44:24

我发现在溶液一个论坛......但我找不到原来的作者。以下是版本（修改后的版本位于我的代码中）。

$(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 keyup绑定和一个'close'html锚点，上面没有照片。

来源

2011-01-08 06:03:41 Yann

如果你不想隐瞒，你将通过点击展示自己的元素：

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; 
});

来源

2011-05-16 05:00:28

比如你点击一个链接元素显示格菜单，只需绑定模糊功能链接元素隐藏DIV菜单

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

来源

2011-10-17 10:34:40

这为我工作，

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

来源

2012-08-01 13:22:55 cupa

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

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

来源

2014-08-26 11:28:17 TGarrett

jQuery单击元素事件

回答

相关问题