JavaScriptでfocusoutとclickイベントの実行順序

Question

ボタンのテキストボックスにfocusoutイベントハンドラを定義し、ボタンのハンドラをclickと定義しました。テキスト入力の中にフォーカスを当ててボタンを直接クリックすると、両方のイベントが期待どおりに起動します。 focusoutイベントが最初に起動され、開発者ツールバーが開いている場合はクリックが発生し、そうでない場合はクリックが発生します。

これの背後にある実際の理由は何でしょうか？ここで

問うもののためのスニペットで、しかし、私は質問自体が十分に明確だったと思います：

document.getElementById('myInput').addEventListener('blur', function(){ alert("Input Focused Out"); }); 
 
     document.getElementById('myButton').addEventListener('click', function(){ alert("Button Clicked"); });

<input id="myInput" name="myInput" type="text" /> 
 
<button id="myButton" name="myButton" >Button</button>

Answer 1

私は、あなたがクリックイベントやぼかしイベントの順序を比較したとき、考えますデバッガツールに関係なく、イベントをクリックする前に常にブレが発生する必要があります。 クリックされたのはmousedown + mouseupです。つまり、マウスボタンが離されるまで、クリックイベントはトリガーされません。

私はこのようなケースが見つかった場合、clickイベントの代わりにmousedownイベントを使用する必要があることを発見しました。 私がさらにテストしたところでは、マウスの順序は常にぼかしイベントの前にあるので、マウスウィンドウが最初にトリガーされ、イベントがぼやけるとがトリガーされます。

フィドル：https://jsfiddle.net/y3gyq93a/1/

JS：

document.getElementById('myInput').addEventListener('blur', function(){ 
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "blur"; 
}); 
     document.getElementById('myButton').addEventListener('mousedown', function(){ 
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "mousedown"; 
}); 

document.getElementById('myButton').addEventListener('click', function(){ 
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "click"; 
}); 

HTML：

<input id="myInput" name="myInput" type="text" /> 
<button id="myButton" name="myButton" >Button</button> 


<div id="myDiv"> 
</div>