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

我在小提琴中测试过，发现如果我们发现这种情况，我们应该使用mousedown事件而不是click事件。当我测试更多时，我发现mousedown的顺序总是在模糊事件之前，因此在这种情况下， 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>

聚焦并单击javascript中的事件执行顺序

1 个答案: