2011-04-15 16 views
1

ユーザがdivを隠すためにdivの外側をクリックするたびに呼び出されるイベントはありますか?JQueryユーザがdivの外側をクリックしたときのイベント?

私は$(document).click()を使ってみましたが、ユーザーがdivを表示するはずのリンクをクリックしても呼び出されました。したがって、クリックハンドライベントはdivを表示し、直ちに$(document).click()が非表示になります。つまり、divは決して表示されません。

アイデア?

答えて

6

あなたは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(); 
}); 
1

要素がクリックされたら、その要素のIDが非表示にしたいIDと一致するかどうかを確認します。そうでない場合は、非表示にします。 jsFiddle

+2

を使用して超簡単。 – karim79

+0

これは私が欲しかったのですが、1つの問題があります。これは完璧に動作しますが、私のコードで 'this.id'を' NULL'または 'empty'(アラートを使ってチェックしています)にしようとすると動作しません。私は最新のjQueryを使用しています。 これを手伝ってもらえますか? –

0

一つ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(); 
}); 
1

はい。 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); 
}); 
関連する問題