Click event not triggered after focusout event

Question

After the Focusout event, the click event is not triggered.

My design is,

<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 have also attached Fiddle here.

Answer 1

Thats because it doesn't have enough time to get the click to trigger since the button moves position. You can see the click works if you hold the mousedown and move the mouse to the button and let the click go and you'll see click works.

Either use btn.on('mousedown',f3); or position the button so it doesn't get moved on focusout

DEMO mousedown

DEMO button positioned

The way click works is that you have mousedown on an element and mouseup on it aswell, thats when it triggers click