jquery处理单击和双击事件

浏览数：21 / 时间：2015年06月09日

今天做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

jquery处理单击和双击事件,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 html 问题 方法 log js class style 代码 html 问题 方法 log js

相关文章

随机文章

您可能还喜欢

您可能还喜欢