在iPhone这样的移动端测试时，我们会发现onclick事件有大约半秒的延迟，这是因为iOS系统需要等待一段时间来判断用户是点击还是拖动，所以会有失焦与点击事件的冲突。
问题描述：
给一个输入框设置失焦事件之后，失焦事件总是优先其它事件先触发，导致输入完成之后点击提交按钮无效。
拓展：①mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
②mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。
解决方案：
方法1、通过给失焦事件设置延迟触发。
方法2、将按钮的点击（click）事件改为按下（mousedown）事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
.father{
width: 500px;
height: 300px;
background: green;
padding-top: 20px;
}
.father input {
width: 120px;
height: 28px;
border: 1px solid blue;
}
.father button{
width: 60px;
height: 28px;
margin-left: 10px;
}
</style>
<script>
function btn() {
alert("you click it");
}
</script>
</head>
<body>
<div class="father" id="father" tabindex="1">
<input id="testInput" placeholder="请输入您的信息"><button id="testBtn" onclick="btn()">提交</button>
</div>
</body>
<script>
// 鼠标按下事件
$("#testBtn").mousedown(function(){
alert("my button mousedown");
});
// 输入框失焦事件
$("#testInput").blur(function(){
alert("now blur ~~~");
});
// 输入框失焦事件 延迟触发
// $("#testInput").blur(function(){
// setTimeout(function(){
// alert("now blur ~~~");
// }, 300)
// });
</script>
</html>
项目里还遇到一个问题，这里我是需要点击input框，弹出一个时间选择框。在IOS上发现点击input框后弹出时间选择框时，input会有焦点
$('#startDate').mousedown(function(e) {
setTimeout(function(){
$("#startDate").blur();
}, 10);
});
.
相关推荐
今天小编就为大家分享一篇解决Js先触发失去焦点事件再执行点击事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按...
其实这是微软公司的一个小小的失误，VC++6.0与office2007(2010)有冲突 FileTool.exe使用方法（详见压缩包得word文档）： 1. 下载FileTool.exe，并解压2. 打开VC6.0，点击File-Open Workspace，选择刚解压出来的...
Python tkinter教程-04：输入框 文章目录0 准备工作1介绍2 基本用法3 通用方法4 启用与禁用5 显示方法6 获取内容7 插入与删除字符8 清空字符9 初始化字符10 重置字符 0 准备工作 要使用，先导入：import tkinter as...
避免命名空间冲突 201 事件 201 Bootstrap 过渡效果（Transition）插件 202 使用案例 202 Bootstrap 模态框（Modal）插件 203 用法 203 选项 206 方法 206 事件 208 Bootstrap 下拉菜单（Dropdown）插件 212 用法 ...
第一章 k3的安装及卸载问题 7 1.1 K3安装所需要的环境 7 1.2 K3对于sql语言排序规则的要求 7 1.3 在安装SQL Server SP3，出现无论用windows认证还是混和认证，都出现密码错误的情况。查看临时目录下的sqlsp.out，...
猜想，是默认utf-8编码与我服务端过滤器中转码以及代码的转码发生了冲突。 2.当输入框值发生变化时，onchange事件不灵敏。 于是，添加了一个函数，输入值一但onchange就调用 。 onKeyProcessDefult: function(i...
11.4 解决jQuery版本冲突问题 11.5 如何设置IE特有的功能 11.6 判断浏览器类型并设置HTML元素内容 11.7 加载Google CDN的jQuery库 11.8 Cookies应用方法 11.9 使用cookie.js管理Cookies 11.10 让Cookies在N分钟后...
8.修改新建任务对话框，点击“浏览”按钮后，默认选中输入框中路径而不是默认路径 9.修改Vista下主菜单处显示为黑色的BUG 10.修改每次启动快车窗口会比上次退出的时候变大的BUG 11.修改快车启动时如果未选中"将快车...
③接着点击操作符区的运算符按钮，并且输入其值（比如ID==45）。确定后符合该参数条件的图元既被选中闪烁。例如：选择大于等于730高程值，且每隔20米的所以等高线。在表达式输入框中输入表达式：(高程-730)%20==0 。...
隔行换色、无缝滚动、返回顶部、外链弹窗、手风琴、Tabs切换、锚点连接、多选按钮、单选按钮、控制多选按钮选择数量、下拉列表、图片缩放、高亮显示、图片展示、输入框文字提示等，其中大多数功能大家经常会用到，但...
6、部分德文与法文字母存在与中文简体编码冲突，请查看readme.txt文件中有关替代问题。 7、文学作品资料的作者朝代以他死亡为准，如张岱1597－1676归为清朝人士。先秦至清朝以前划为古代，清朝至1930年划为近代，...
修改扩展界面支持库一，解决树形框项目无法通过鼠标点击进入编辑状态的BUG。 6. 修改高级表格支持库，解决插入行/插入列在未指定行号/列号的情况下插入位置不正确的BUG。 7. 修改文本语音转换支持库，增加“机读...
6、然后将agentId 填入上面的输入框 点击connect 按钮重新加载，则进入当前应用的命令模式，输入3，切换到arthas 命令，就可以使用了。 Cubic java应用诊断工具 更新日志：v1.4.1deature：1、线程池监控2、protobuf...
解决切换到GB18030字符集时多重候选因范围检查可能造成的翻页死机问题（如海峰五笔输入fggg，oitk等编码）： 0x03206: 833D BC1E 9273 0074 3483 --->>> 833D BC1E 9273 0472 3483 ==============================...
解决切换到GB18030字符集时多重候选因范围检查可能造成的翻页死机问题（如海峰五笔输入fggg，oitk等编码）： 0x03206: 833D BC1E 9273 0074 3483 --->>> 833D BC1E 9273 0472 3483 ==============================...
不幸的是，绝大多数租约都是用法律术语写成的长文件： 让人们对其合法权利和义务感到困惑或误解包含各方从未阅读过，模棱两可或可能不遵守法律的条款让人们感到脆弱和不安，增加冲突的风险我们的项目为房东和租户...