Javascript中的焦点和单击事件执行顺序

Question

我focusout在文本框上定义了一个事件处理click程序，在按钮上定义了一个处理程序。如果我将焦点放在文本输入内，然后直接单击按钮，那么这两个事件都会按预期触发。focusout事件首先click被触发，如果开发者工具栏被打开则被触发，反之亦然。

这背后的实际原因是什么？

这是提问者的片段，但我相信问题本身已经足够清楚：

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。这意味着，直到释放鼠标按钮，才会触发单击事件。

我在一个fiddle中测试，发现如果我们发现这种情况，我们应该使用mousedown事件而不是click事件。随着我测试的更多，我发现mousedown的顺序总是在blur事件之前，所以在这种情况下，mousedown会先触发，然后blur事件会触发。

小提琴：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>