質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

12429閲覧

領域外を押下した時、ボックスを非表示にしたい

k499778

総合スコア599

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2016/05/24 14:29

前回の続きです。
https://teratail.com/questions/35898

現在上記タグの技術を使ってアプリケーションを作っています。

テキストボックスにフォーカスが当たった時にボックスを表示させ、
フォーカスが外れるとボックスを非表示にします。

画面イメージ
イメージ説明

しかし、それだとボックス内のリンクやボタンを押すとボックスが消えてしまうのです。
そこで前回の質問でアドバイスを頂いたとおり、タイムマージンの発想で実装してみました。

ただそれだと次はボックスを非表示にできません。
ボックス外(テキストボックスは除く)をクリックした時にボックスが非表示になるようにしたいのですが、なにかいい方法はないでしょうか?

コードは以下です。

html

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="UTF-8"/> 5 <meta http-equiv="content-language" content="ja"/> 6 <title>TEST</title> 7 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 8 <style> 9 #box{ 10 position: relative; 11 background: aqua; 12 top:20px; 13 width: 300px; 14 border: solid blue; 15 } 16 </style> 17</head> 18<body> 19<input type="text" id="textbox"> 20<div id="box" style="display:none"> 21 <a href="">リンク</a><br> 22 <button type="button">ボタン</button> 23</div> 24 25<script> 26$(function(){ 27 28 // ボックスを表示する 29 $('#textbox').on('focus',function(e){ 30 $('#box').show(); 31 // e.preventDefault(); うまくいかない 32 // return false; うまくいかない 33 }); 34 35 // ボックスを非表示にする 36 var timerId 37 $('#textbox').on('focusout',function(){ 38 timerId = setTimeout(function(){ 39 $('#box').hide(); 40 },1000); 41 }); 42 43 // ボックス内をクリックした際ボックスを非表示にしない 44 $('#box').on('click',function(){ 45 clearTimeout(timerId); 46 }); 47 48 // ボックス外をクリックした際ボックスを非表示にする // うまくいかない 49 $(document).on('click',function(e){ 50 if(!$.contains($('#textbox')[0], e.target) || !$.contains($('#box')[0], e.target)){ 51 $('#box').hide(); 52 } 53 }); 54 55}); 56</script> 57 58</body> 59</html> 60

伝播を止める方法やcontainsを使ったやり方も試しましたが、伝播も止まらずうまくいきませんでした。
もしわかる方がいればお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

javascript

1$(function(){ 2 3 // ボックスを表示する 4 $('#textbox').on('focus',function(e){ 5 $('#box').show(); 6 }); 7 8 // ボックス内をクリックした際ボックスを非表示にしない 9 $('#box').on('click',function(event){ 10 event.stopPropagation(); 11 }); 12 13 // ボックス外をクリックした際ボックスを非表示にする 14 $(document).on('click',function(e){ 15 if(e.srcElement.id!=='textbox'){ 16 $('#box').hide(); 17 } 18 }); 19 20});

これでどうでしょうか。

投稿2016/05/24 16:38

編集2016/05/25 01:27
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k499778

2016/05/24 22:07

回答ありがとうございます! できました! 理想通りの動きです。 ありがとうございます。
k499778

2016/05/25 03:18 編集

自分用の備忘録として書きます。 「srcElement」がFireFoxだと使用できなかったので 「target」に変更しました。 「srcElement」はIE専用ですが、 jQueryを使用すれば、IEでもtargetプロパティを使用できるのでsrcElementは不要です。
退会済みユーザー

退会済みユーザー

2016/05/25 01:25

なるほど。 補足いただきありがとうございます。
k499778

2016/05/25 03:17

いえいえ滅相もございません。こちらこそありがとうございました(^-^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問