移动手机端不能触发jQuery双击事件dblclick解决方法



今天意外发现移动手机端不能触发jQuery的dblclick事件,做了个简单的页面重现问题:

<input name="btn1" id="btn1" type="button" value="随便点">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#btn1").on("click", function(){console.log("click")});
    $("#btn1").on("dblclick", function(){console.log("dblclick")});
});
</script>



如上图所示,手机端只触发了两次click事件,没有触发dblclick事件。既然click事件都能正常触发,那么我们应该可以通过判断两次单击间隔时间来模拟dblclick双击事件,修改脚本如下:

<input name="btn1" id="btn1" type="button" value="随便点">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var touchtime = new Date().getTime();
    
    $("#btn1").on("click", function(){
        if( new Date().getTime() - touchtime < 500 ){
            console.log("dblclick");
        }else{
            touchtime = new Date().getTime();
            console.log("click")
        }
    });
});
</script>



测试可行。

评论: 0 | 引用: 0 | 查看次数: 3210
发表评论
登录后再发表评论!