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

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

我的设计是，

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

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

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

DEMO mousedown

DEMO按钮定位

点击工作的方式是你在元素和鼠标上都有mousedown，也就是当它触发点击时

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

演示