专注和点击javascript中的事件执行顺序

我已经定义了一个文本框上的focusout事件处理函数和一个按钮上的click处理函数。如果我将注意力集中在文本输入内，然后直接单击该按钮，那么两个事件都会按预期触发。聚焦事件首先被触发，如果开发者工具栏被打开，点击被触发，否则反之亦然触发。专注和点击javascript中的事件执行顺序

背后有什么可能是真正的原因？

下面是那些要求片断，但我相信这个问题本身是很清晰：

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>

来源

2017-03-02 selvassn

“在反之亦然方式” 意味着什么？ – Sojtin

你能提供一个你的实际情况的小样本吗？ –

我想，当你在比较click事件和模糊事件的顺序， 不管调试器工具如何，在点击事件之前模糊应始终触发。点击的原因涉及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>

来源

2017-03-02 21:21:00 Nitesh

专注和点击javascript中的事件执行顺序

回答

相关问题