jquery处理单击和双击事件

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

例子：

Html

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

js

    $(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);
        });
    });

结果：

1. 双击后，input值为2

2. 单击后，input值为1

posted @ 2014-08-21 20:15  东师理想--周枫  阅读(624)  评论(0)  编辑  收藏  举报