jquery - 聚焦事件后未触发单击事件

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

我还在这里附上了小提琴。

Answer 1

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

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

演示 mousedown

DEMO按钮定位

click 的工作方式是你在一个元素上有 mousedown 并且在它上面也有 mouseup ，那就是它触发点击的时候

Answer 2

在 Focusout 事件首先从 textarea 中聚焦之后，它将采取按钮的单击操作

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

});

演示

Answer 3

另一种方法是让 focusout 事件超时。例如：

object.addEventListener('focusout', function() {
    /* Set some timeout */
    setTimeout(function () {
    // Things to do before the focus is out
    }, 50)
});