jquery – 焦点输出事件后未触发的Click事件

在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.

解决方法

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

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

DEMO mousedown

DEMO button positioned

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

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...