JavaScript中的focusout和click事件执行顺序。

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>

- selvakumar

---

“in vice-versa manner” 是什么意思？ - Sojtin

你能提供一小段演示你实际的情况吗？ - Nicola Bertelloni

Answer 1

我认为，当你比较点击事件和失去焦点事件的顺序时，无论调试工具如何，失去焦点事件应该始终在点击事件之前触发。原因是点击事件包含了mousedown和mouseup两个过程。也就是说，在鼠标释放之前，点击事件不会被触发。

我在一个fiddle中进行了测试，如果我们遇到这种情况，应该使用mousedown事件代替点击事件。随着测试的深入，我发现mousedown事件总是在失去焦点事件之前触发，因此在这种情况下，mousedown事件将先触发，然后是失去焦点事件。

Fiddle: 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>

- Nitesh