🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

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

jQuery

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

Q&A

2回答

2532閲覧

javascript: 指定したDom以外をクリックした時にjsを発火させる

nanase21

総合スコア144

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2019/12/07 08:28

編集2019/12/10 01:42

実現したいこと

#formをクリックして入力中から途中で離脱した際に他の要素をクリックした時に「最後まで入力してください」と警告を出す処理を走らせたいです。

困っていること

textareaやinputを使用していないので、フォーカスを外れた時に検知する方法が分からなくて困っています。

html

1<div class="container"> 2<div class="index message"> 3.... 4.... 5.... 6</div> 7<div id="fomr"><div contenteditable="true" id="dom"></div><input type="submit" value="送信"></div> 8</div>

js

1//formをクリックした時に走らせる処理 2var dom = document.getElementById("dom") 3dom.addEventListener('click', function() { 4 alert('hoge') 5}); 6//入力途中に離脱した時の処理 7//分からない...

テキストエリア

動くサンプルと試したこと

下記のようにすることで、focusoutした時に、アラートが表示されるようになったのですが、focusinからfocusoutした時に一回だけ発火されるようにしたいです。

codepen

js

1//formをクリックした時に走らせる処理 2var dom = document.getElementById("dom"); 3//formをクリックした時に走らせる処理 4dom.addEventListener('focusout', function() { 5 alert('focusin') 6}); 7dom.addEventListener('focusout', function() { 8 alert('focusout') 9});

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

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

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

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

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

kei344

2019/12/07 08:37

他の要素をクリックすることが「離脱」なのでしょうか。離脱を具体的に定義することをお勧めします。
nanase21

2019/12/07 08:44

離脱の定義としては、form以外をクリックした時と考えています。
kei344

2019/12/07 08:45

ブラウザを閉じても「離脱」出来ますが、そういったことは無視しているということでしょうか?
guest

回答2

0

textarea や input と変わらないと思いますがとりあえず

jQuery

1$('#dom').on('focusout', function(event) { 2 alert('hoge'); 3});

投稿2019/12/09 07:34

x_x

総合スコア13749

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

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

nanase21

2019/12/10 01:43

ご教示いただきありがとうございます。 やりたいこととしては、focusinからfocusoutした時に一回だけ実行されるようにしたいです。
x_x

2019/12/11 02:05

focusin からとは? どこが想定と違うのか明記してください
guest

0

ルート要素でイベントを拾えばよいと思います。

【DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita】
https://qiita.com/hosomichi/items/49500fea5fdf43f59c58#内側をクリックしたときに外側のイベントを発生させない

【ちゃんと知ってる?JavaScriptのイベントバブリングを学ぼう - WPJ】
https://www.webprofessional.jp/event-bubbling-javascript/

投稿2019/12/07 08:48

kei344

総合スコア69596

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

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

nanase21

2019/12/10 01:44

ご教示いただきありがとうございます。 focusoutした時に、アラートを表示されることはできました。 しかし、私が実現したいこととしては、focusinからfocusoutした時にだけ意図した処理を実行させたいと考えているのですがその場合どのようにすれば良いかご教示いただけないでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問