Click event does not fire after focus event

Question

After the Focusout event, the click event does not fire.

My design

<textarea id="txt"></textarea> <input type="button" id="btnClick" value="Submit" /> 

JQuery

 $(document).ready(function () { var field = $("#txt"); var btn = $("#btnClick"); field.on("focusin", f1); field.on("focusout", f2); btn.on("click", f3); function f1() { field.removeClass("c1").addClass("c2"); } function f2() { field.removeClass("c2").addClass("c1"); } function f3() { alert('hi'); } }); 

Style

 .c1 { height:40px; } .c2 { height:250px;} 

And I also added feeddle here .

Answer 1

This is because he does not have enough time to click on the click, as the button moves the position. You can see that the click works if you hold the muscles and move the mouse to the button, and let the click go, and you will see that the click works.

Or use btn.on('mousedown',f3); , or place the button so that it does not move in focus

Demo mousedown

DEMO button is located

How a click works is that you have a mousedown on the element and mouseup on it, and then when it causes a click

Answer 2

After the Focusout event first focuses on textarea, then it takes action click Button

in js

 $(document).ready(function () { var field = $("#txt"); var btn = $("#btnClick"); field.on("focusin", f1); field.on("focusout", f2); btn.on("click", f3);//use btn.on("mousedown", f3); here to prevent the focusout before click function f1() { field.removeClass("c1").addClass("c2"); } function f2() { field.removeClass("c2").addClass("c1"); alert("focusout"); } function f3() { alert('hi'); } }); 

demonstration