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

Question

実現したいこと

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

困っていること

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

<div class="container">
<div class="index message">
....
....
....
</div>
<div id="fomr"><div contenteditable="true" id="dom"></div><input type="submit" value="送信"></div>
</div>

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

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

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

codepen

//formをクリックした時に走らせる処理
var dom = document.getElementById("dom");
//formをクリックした時に走らせる処理
dom.addEventListener('focusout', function() {
  alert('focusin')
});
dom.addEventListener('focusout', function() {
  alert('focusout')
});

Comments

[kei344]

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

[nanase21]

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

[kei344]

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

Answer 1

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

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

Comments

[nanase21]

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

[x_x]

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

Answer 2

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

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

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

Comments

[nanase21]

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