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