jquery - focusout 事件后未触发单击事件

Question

Focusout事件后，不触发click事件。

我的设计是，

<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');
}
});

风格，

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

我还附上了 Fiddle here .

Answer 1

那是因为按钮移动位置后没有足够的时间来触发点击。如果按住鼠标并将鼠标移到按钮上，然后松开单击，您将看到单击有效。

使用 btn.on('mousedown',f3); 或定位按钮，使其不会在焦点移出时移动

DEMO mousedown

DEMO button positioned

点击的工作方式是，你在一个元素上按下鼠标并在它上面按下鼠标，这就是它触发点击的时候