質問: 前回の続きです。 現在上記タグの技術を使ってアプリケーションを作っています。 テキストボックスにフォーカスが当たった時にボックスを表示させ、 フォーカスが外れるとボックスを非表示にします。 画面イメージ ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/8efd42c5484b8a41711b3bfcdc6786bb.png) しかし、それだとボックス内のリンクやボタンを押すとボックスが消えてしまうのです。 そこで前回の質問でアドバイスを頂いたとおり、タイムマージンの発想で実装してみました。 ただそれだと次はボックスを非表示にできません。 **ボックス外(テキストボックスは除く)をクリックした時にボックスが非表示になるようにしたいのですが、なにかいい方法はないでしょうか?** コードは以下です。 ``` TEST リンク ボタン ``` 伝播を止める方法やcontainsを使ったやり方も試しましたが、伝播も止まらずうまくいきませんでした。 もしわかる方がいればお願い致します。
回答: ``` $(function(){ // ボックスを表示する $('#textbox').on('focus',function(e){ $('#box').show(); }); // ボックス内をクリックした際ボックスを非表示にしない $('#box').on('click',function(event){ event.stopPropagation(); }); // ボックス外をクリックした際ボックスを非表示にする $(document).on('click',function(e){ if(e.srcElement.id!=='textbox'){ $('#box').hide(); } }); }); ``` これでどうでしょうか。