8

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

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

4

3 回答 3

23

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

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

演示 mousedown

DEMO按钮定位

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

于 2013-09-17T11:34:20.680 回答
0

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

});

演示

于 2013-09-17T11:35:32.527 回答
0

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

object.addEventListener('focusout', function() {
    /* Set some timeout */
    setTimeout(function () {
    // Things to do before the focus is out
    }, 50)
});
于 2019-11-30T19:40:44.310 回答