jQuery单击元素事件
我有一个浮动div得到显示，我希望它被隐藏，当用户点击div。 这与hover一个元素时的.hover（）函数callback类似。 只有我想这样做点击。
我试图设置一个单击事件的身体，这将隐藏的股利，但这给了意想不到的结果。
任何人都有想法，我怎么可以轻松做到这一点？
另一个可能更简单的选项是在浮动DIV和页面的其余部分之间添加一个透明div。
透明DIV上的一个简单的单击事件可以处理隐藏，它将避免您遇到的单击事件的问题。
如果你想在你点击页面的其他地方时清除div，你可以这样做：
$('body').click(function(event) { if (!$(event.target).closest('#myDiv').length) { $('#myDiv').hide(); }; }); 如果你使用的是JQuery，你可以使用如下的select器：
$("*:not(#myDiv)").live("click", function(){ $("#myDiv").hide(); });
当然，你正在寻找模糊事件？
最好的方法是：
$（document）.bind（'click'，function（e）{
var $ clicked = $（e.target）;
如果（！$ clicked.parents（）。hasClass（“divtohide”））{
$（ “divtohide”）隐藏（）。
}
}）;
这对我有用，
var mouseOver = false; $("#divToHide").mouseover(function(){mouseOver=true;}); $("#divToHide").mouseout(function(){mouseOver=false;}); $("body").click(function(){ if(mouseOver == false) { $("#divToHide").hide(); } });
例如你点击一个链接元素来显示div菜单，你只需要绑定blurfunction链接元素来隐藏div菜单
$('a#displaymenu').click(function(){ $("#divName").toggle(); }).blur(function() {$("#divName").hide()})
这是一个函数来处理点击事件，我喂它的popupselect器，和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>这样的popup式元素，你可以使用我的函数clickOut("div.popup", $("div.popup"));
$('body').click(function (event) { if ($("#divID").is(':visible')) { $('#divID').slideUp(); } });
这可以用来检查div是否可见，如果它是可见的，则会将对象向上滑动。
这是一个全面的事件驱动的方法
- 自定义事件处理图层的“召唤”和“解散”，以便不踩在其他基于点击事件的脚趾上
- document.body只在所讨论的图层实际上可见时才会侦听一个closures事件
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>
这是我知道的很多代码，但这里只是为了展示一种不同的方法。
在文档上使用事件处理程序对我来说很合适：
函数popup（元素）
{
element.onmousedown = function（event）{event.stopPropagation（）; };
document.onmousedown = function（）{popDown（element）; };
document.body.appendChild（element）;
}
函数popDown（元素）
{
document.body.removeChild（element）;
document.onmousedown = null;
}
我在论坛上find了这个解决scheme，但我找不到原来的作者。 这里是版本（修改了我的代码）。
$(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绑定和一个'closures'的html锚点上图未显示。
如果您不想通过单击自己隐藏要显示的元素，请执行以下操作：
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; });
你将需要监视整个页面的mouseDown事件，但是当用户点击你的浮动div时你必须注意。
我build议添加一个hover事件到你的浮动div，所以当用户在其上hover时， mouseDown被忽略，但是当它没有被hover在mouseDown会closures它
