クリック時に他の要素がblurする前に処理を実行する

何をしたかったのか

ページ内に複数のElement（要素A,要素Bとする）が設置されており、
要素Aにフォーカスがある状態で、要素Bをクリックする時に、要素AのOnBlurが発生する前に要素Bのクリック処理を実行したい。
例えば...

• 要素Aのフォーカスが外れると要素Bが消えてしまう
• 要素Aのフォーカスが外れると自動的にsubmitが走る

<input type="text" placeholder="要素A" onBlur="console.log('この処理の前に何かしたい')">
<input type="text" placeholder="要素B">

解決策1

要素BのmouseDownイベントを取得し、クリック処理を実装する。
⇨要素Bのclickイベントは要素Aのblurイベントより遅いため、処理の前に割り込めない。

※注意
TABキーで移動された場合は処理が発火しません。

<input type="text" placeholder="要素A" onBlur="console.log('要素Ablurイベント')">
<input type="text" placeholder="要素B" onmousedown="console.log('要素Bmousedownイベント')" onclick="console.log('要素Bclickイベント')">

コンソールの出力

"要素Bmousedownイベント"
"要素Ablurイベント"
"要素Bclickイベント"

参考：　イベントの発火順序
別記事にまとめました
https://qiita.com/zinc0765/items/2380f6872221faafaee4

解決策２（Vueなどを入れている場合）

vuetifyでは要素外がクリックされた時に発生する関数（v-click-outside）があるのでそちらを利用する。
https://vuetifyjs.com/ja/directives/click-outside/

参考文献

https://developer.mozilla.org/ja/docs/Web/API/Element/mousedown_event
https://developer.mozilla.org/ja/docs/Web/API/Element/blur_event