ユーザがdivを隠すためにdivの外側をクリックするたびに呼び出されるイベントはありますか?JQueryユーザがdivの外側をクリックしたときのイベント?
私は$(document).click()
を使ってみましたが、ユーザーがdivを表示するはずのリンクをクリックしても呼び出されました。したがって、クリックハンドライベントはdivを表示し、直ちに$(document).click()
が非表示になります。つまり、divは決して表示されません。
アイデア?
ユーザがdivを隠すためにdivの外側をクリックするたびに呼び出されるイベントはありますか?JQueryユーザがdivの外側をクリックしたときのイベント?
私は$(document).click()
を使ってみましたが、ユーザーがdivを表示するはずのリンクをクリックしても呼び出されました。したがって、クリックハンドライベントはdivを表示し、直ちに$(document).click()
が非表示になります。つまり、divは決して表示されません。
アイデア?
あなたはbody要素(または他の適切な親コンテナ)にonclickのイベントハンドラを委任しようとすると、テストtarget elementがリンク明らかにしているかどうかのためにすることができます:上記.toggle
を使用して短縮することができ
$("body").click(function(e) {
if(e.target.id == "idOfLinkToShowDiv") {
$("#idOfTheDiv").show();
} else {
$("#idOfTheDiv").hide();
}
});
を:
$("body").click(function(e) {
$("#idOfTheDiv").toggle(e.target.id == "idOfLinkToShowDiv");
});
別の方法:
$("body").click(function() {
$("#idOfTheDiv").hide();
});
$(".showLink").click(function(e) {
e.stopPropagation();
$("#idOfTheDiv").show();
});
要素がクリックされたら、その要素のIDが非表示にしたいIDと一致するかどうかを確認します。そうでない場合は、非表示にします。 jsFiddle
一つsoluation上
$("*").click(function(){
if(this.id === "hideMe"){
return false;
}
else{
$("#hideMe").hide();
}
});
チェックアウトのデモは、要素がクリックされたチェックです。
別の解決策は次のようになります。
<body>
<div class="infopane"></div>
<div class="wrapper">
content of page
</div>
</body>
だから私は行うことができます。
$('.wrapper').click(function() {
$('.infopane').hide();
});
はい。 divを表示した後は、divイベントをドキュメント本体に隠すためにclickイベントのみをバインドします。次に、表示されたdiv自体にclick()イベントをキャッチし、div click()での伝播を防ぎます。 divの外側にあるクリックは非表示になり、内側のクリックはドキュメントにバブルしません。
function hideDiv(){
$('#someDiv').hide();
$(document.body).unbind('click',hideDiv);
}
$('#someLink').click(function(){
$('#someDiv').show().click(function(e){ e.stopPropagation(); });
$(document.body).bind('click',hideDiv);
});
外部イベントプラグインを探しています。ページ上のすべての単一の要素にクリックハンドラをアタッチします
を使用して超簡単。 – karim79
これは私が欲しかったのですが、1つの問題があります。これは完璧に動作しますが、私のコードで 'this.id'を' NULL'または 'empty'(アラートを使ってチェックしています)にしようとすると動作しません。私は最新のjQueryを使用しています。 これを手伝ってもらえますか? –