jQuery單擊元素事件
[英]jQuery click off element event
問題描述
我有一個浮動div顯示，我希望它在用戶點擊div時隱藏。 當懸停在元素上時，這類似於.hover（）函數回調。 只有我想點擊才能這樣做。
我嘗試只為身體設置一個點擊事件，這會隱藏div，但這會產生意想不到的結果。
任何人都有關於我如何輕松做到這一點的想法？
15 個解決方案
解決方案1
86 2009-09-14 20:25:47
如果要在單擊頁面中的其他位置時清除div，可以執行以下操作：
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
解決方案2
19 已采納 2009-09-14 20:40:00
另一個可能更簡單的選擇是在浮動DIV和頁面其余部分之間添加透明div。
透明DIV上的簡單點擊事件可以處理隱藏，它可以避免您遇到click事件時遇到的問題。
解決方案3
11 2010-04-06 21:10:48
如果你正在使用Jquery，你可以使用如下的選擇器：
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
解決方案4
10 2009-09-14 20:43:19
你肯定在尋找模糊事件嗎？
解決方案5
9 2010-11-03 13:18:37
最好的方法是： -
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("divtohide")) {
$(".divtohide").hide();
}
});
解決方案6
2 2012-08-01 13:22:55
這對我有用，
var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
if(mouseOver == false) {
$("#divToHide").hide();
}
});
解決方案7
1 2014-08-26 11:28:17
$('body').click(function (event) {
if ($("#divID").is(':visible')) {
$('#divID').slideUp();
}
});
這可以用來檢查div是否可見，如果它是可見的，它將向上滑動對象。
解決方案8
1 2010-10-05 16:01:14
這是一個處理clickout事件的函數，我將它提供給彈出窗口的選擇器和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"));
解決方案9
1 2011-10-17 10:34:40
例如，您單擊鏈接元素以顯示div菜單，您只需將模糊功能綁定到鏈接元素以隱藏div菜單
$('a#displaymenu').click(function(){
$("#divName").toggle();
}).blur(function() {$("#divName").hide()})
解決方案10
0 2009-09-14 21:25:07
這是一個成熟的事件驅動方法
- 自定義事件處理圖層的“召喚”和“解雇”，而不是踩到其他基於點擊的事件的腳趾
- 僅當有問題的層實際可見時，document.body才會偵聽dismiss事件
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>
這是我所知道的很多代碼，但這只是為了展示一種不同的方法。
解決方案11
0 2010-03-01 22:17:05
解決方案12
0 2010-06-09 05:39:38
在文檔上使用事件處理程序對我很有用：
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;
}
解決方案13
0 2011-01-08 06:03:41
我在一個論壇中找到了解決方案......但我找不到它歸功於原始作者。 這是版本（修改后的代碼）。
$(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錨點，如上圖所示。
解決方案14
0 2011-05-16 05:00:28
如果您不想通過單擊自己隱藏要顯示的元素：
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;
});
解決方案15
-2 2009-09-14 20:27:28
您將需要監視整個頁面的mouseDown事件，但是當用戶在浮動div中單擊時，您必須注意。
我建議在你的浮動div中添加一個懸停事件，這樣當用戶將鼠標懸停在它上面時，會忽略mouseDown ，但是當它沒有懸停在mouseDown會關閉它
jQuery的點擊事件觸發錯誤的元素？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.