focusout and click event execution order in Javascript - Stack Overflow

admin管理员组

文章数量:1350953

I have defined a focusout event handler on a text box and a click handler on a button. If I focus inside the text input and then directly click the button, then both the events get fired, as expected. focusout event gets fired first and click is fired if developer toolbar is opened else its fires in vice-versa manner.

What could be actual reason behind this?

Here is the snippet for the ones asking, but I believe question itself was clear enough:

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>

I have defined a focusout event handler on a text box and a click handler on a button. If I focus inside the text input and then directly click the button, then both the events get fired, as expected. focusout event gets fired first and click is fired if developer toolbar is opened else its fires in vice-versa manner.

What could be actual reason behind this?

Here is the snippet for the ones asking, but I believe question itself was clear enough:

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>

• javascript
• dom-events

Share Improve this question Follow edited Jun 19, 2021 at 12:36 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 2, 2017 at 11:38 selvakumarselvakumar 65477 silver badges1616 bronze badges 2

• "in vice-versa manner" mean what exactly? – Christof Commented Mar 2, 2017 at 11:42
• can you provide a small demo of what your actual situation? – Nicola Bertelloni Commented Mar 2, 2017 at 11:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I think, when you are paring order of click event and blur event, blur should always trigger before click event irrespective of debugger tool. The reason being click involves mousedown+mouseup. It means, until mouse button is released, click event will not get triggered.

I tested in a fiddle and found that if we find such a case, we should use mousedown event instead of click event. As I tested more, I found that order of mousedown is always before blur event so in such a case, mousedown will trigger first and then blur event will trigger.

Fiddle: https://jsfiddle/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>

本文标签： focusout and click event execution order in JavascriptStack Overflow