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