blurやfocusoutのイベントでどの要素をクリックしたかを知る方法

JavaScript
こんにちは、今回は、
javascriptのイベントリスナーである
「blur,focusout」でフォーカスを外すときにクリックした要素を取得する方法を記します。

使用例は、
inputからフォーカスを外した場合、input要素を消す。
ただし、特定のボタンを押した場合は、input要素を消さない。
といった感じです。

やり方は、event.relatedTargetでクリックした要素を取得できます。

blur、focusoutイベントのrelatedTargetがクリックした要素です。
ただし、あくまでイベントに関連する別の要素が取得できるだけです。
この”関連する”のレベルがわかりませんが、ボタンに関しては要素取得できました。

そのため、取得できない場合は、null
取得できた場合は、どの要素かを判定して続きの処理を作成するとよいと思います。

上記のようにフォーカスが外れたときに実行するイベントに対して適用させます。

このように使えますね。

以上です。

コメント

タイトルとURLをコピーしました