您的位置：首页 > Web前端 > JQuery

jquery处理单击和双击事件

2014-08-21 20:15 423 查看
今天做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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航