首页 > 代码库 > jquery处理单击和双击事件

jquery处理单击和双击事件

2024-07-18 20:07:55   226人阅读

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


联系
我们