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

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

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

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

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

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

<input type="text"  blur="focusout(e)">
<button >追加</button

<script>
function focusout(e){
 console.log(e.relatedTarget);
}
</script>
//<button>追加</button>

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

このように使えますね。

<div id="inputWrap">
    <input type="text" id="input" blur="focusout(e)">
    <button onclick="add()" id="addBtn">追加</button>
</div>
<script>
 function foucusout(e){
 var clickElment = e.relatedTarget;
if(clickElement  != null && clickElement.id == "addBtn" ){
  return false;
}
document.getElementById("inputWrap").remove();
}
function add(){
//追加処理
}
</script>

以上です。