木子屋
 

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

作者: dnawo

日期: 2016-10-13 08:18 PM

分类: Android编程

内容: 今天意外发现移动手机端不能触发jQuery的dblclick事件，做了个简单的页面重现问题：
复制内容到剪贴板 程序代码<input name="btn1" id="btn1" type="button" value="随便点">
<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">
$(document).ready(function(){
    var touchtime = new Date().getTime();
    
    $("#btn1").on("click", function(){
        if((new Date()).getTime() - touchtime < 300 ){
            console.log("dblclick");
        }else{
            touchtime = new Date().getTime();
            console.log("click")
        }
    });
});
</script>
OK，问题解决！

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

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

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms