質問
表示されるフローティングdivがあり、ユーザーがdivをクリックしたときに非表示にしたい。これは、要素をホバーするときの.hover()関数のコールバックに似ています。クリックに対してのみこれを行いたい。
本文にクリックイベントを設定しようとすると、divが非表示になりますが、予期しない結果が発生しました。
これを簡単に行う方法についてのアイデアはありますか?
解決
別の、おそらくより簡単なオプションは、フローティングDIVとページの残りの部分の間に透明なdivを追加することです。
透明なDIVでの単純なクリックイベントで非表示を処理でき、クリックイベントで発生する問題を回避できます。
他のヒント
ページ内の別の場所をクリックしたときにdivをクリアする場合は、次のようなことができます。
$('body').click(function(event) {
if (!$(event.target).closest('#myDiv').length) {
$('#myDiv').hide();
};
});
Jqueryを使用している場合、次のようなセレクターを使用できます。
$("*:not(#myDiv)").live("click", function(){
$("#myDiv").hide();
});
blur イベントを探していますか?
これを行う最良の方法は次のとおりです。-
$(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("divtohide")) { $(".divtohide").hide(); } });
これは私のために働いた、
var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
if(mouseOver == false) {
$("#divToHide").hide();
}
});
リンク要素をクリックしてdivメニューを表示する例では、単にblur関数をリンク要素にバインドしてdivメニューを非表示にします
$('a#displaymenu').click(function(){
$("#divName").toggle();
}).blur(function() {$("#divName").hide()})
これは、クリックアウトイベントを処理する関数です。ポップアップのセレクターと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"));
$('body').click(function (event) {
if ($("#divID").is(':visible')) {
$('#divID').slideUp();
}
});
これは、divが表示されているかどうかを確認するために使用できます。表示されている場合は、オブジェクトを上にスライドします。
これは、本格的なイベント駆動型のアプローチです
- カスタムイベントは<!> quot; summoning <!> quot;を処理します。および<!> quot; dismissing <!> quot;他のクリックベースのイベントのつま先を踏まないようにするレイヤーの
- 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>
私が知っているコードはたくさんありますが、ここでは異なるアプローチを示します。
これを試すことができます。 http://benalman.com/projects/jquery-clickoutside-plugin/
ドキュメントでイベントハンドラーを使用するとうまく機能します:
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; }
フォーラムで解決策を見つけました... これがバージョンです(私のコードに存在する修正済み)。
$(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キーアップバインディングと、上に示していない 'close' 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内をクリックしたときは注意する必要があります。
フローティングdivにホバーイベントを追加することをお勧めします。ユーザーがホバーしているときに<=>は無視されますが、ホバーされていない場合は<=>が閉じます