解决输入框失焦事件与按钮点击事件冲突的问题

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

});

 

 

.

猜你喜欢

转载自570109268.iteye.com/blog/2400875
今日推荐