jquery处理单击和双击事件

最新推荐文章于 2022-08-09 11:59:12 发布

weixin_30778805

最新推荐文章于 2022-08-09 11:59:12 发布

阅读量327

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cczhoufeng/p/3927983.html

版权

今天做div点击时，需要用到同一div的单击和双击事件，出现问题如下

例子：

Html

<body>
    <div id="div_1">单击双击我</div>    
    事件执行次数：<input id="input_1" type="text" value="0" />
</body>

    $(document).ready(function(){  
        var i = 0;         

        $("#div_1").dblclick(function(){
            i = i + 2;
            $("#input_1").val(i);
        });

        $("#div_1").click(function(){
            i++;
            $("#input_1").val(i);
        });
    });

结果：

双击div后，input值为4，说明执行1次双击和2次单击事件

找了网友的博客后，修改js如下

$(document).ready(function(){  
        var i = 0;         
        var TimeFn = null;

        $("#div_1").dblclick(function(){
            clearTimeout(TimeFn);
            i = i + 2;
            $("#input_1").val(i);
        });

        $("#div_1").click(function(){
            // 取消上次延时未执行的方法
            clearTimeout(TimeFn);
            //执行延时
            TimeFn = setTimeout(function(){
            //do function在此处写单击事件要执行的代码
            i++;
            $("#input_1").val(i);
            },300);
        });
    });