Question

在Focusout事件之后，不会触发点击事件。

我的设计是，

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

我还附上了小提琴here。

Answer 1

多数民众赞成，因为按钮移动位置时没有足够的时间让点击触发。如果您按住mousedown并将鼠标移动到按钮并点击该按钮，您可以看到点击有效，您将看到点击工作。

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

DEMO mousedown

DEMO button positioned

点击工作的方式是你在它上面的元素和鼠标上进行了moused，以及当它触发点击时

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

});

<强> demo

Answer 3

另一种方法是使焦点事件超时。例如：

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

聚焦事件后未触发的点击事件

3 个答案: