jquery单击事件和双击事件冲突解决方案

jquery单击事件和双击事件冲突解决方案

这篇文章主要为自己记录下找到的jquery单击和双击事件冲突的一个解决方案，方便自己以后使用，有兴趣的小伙伴们也可以参考下或者查看原帖> http://www.jb51.net/article/80343.htm

1. 功能要求
   
   在实际操作中双击只会弹出对话框无法进入到修改界面，主要也是无语客户不让我把功能互换说是这是他们的操作习惯。
2. 原代码

//#region 修改房号信息
$("span[id^=HouseNoSpan]").dblclick(function () {
  $(this).hide();
  var NowNo = $(this).attr("ID").substring("HouseNoSpan".length);
  var TextID = "HouseNoText" + NowNo
  $("#" + TextID + "").show();
  $("#HouseNo" + NowNo + "").select()
})
$("span[id^=HouseNoText]").click(function () {
  self.hide();
})
$("input[id^=HouseNo]").blur(function () {
  var NowNo = $(this).attr("ID").substring("HouseNo".length);
  $("#HouseNoText" + NowNo + "").hide();
  $("#HouseNoSpan" + NowNo + "").show();
  var HouseNo = $(this).val();
  $("#HouseNoSpan" + NowNo + "").html(HouseNo);
  $("#H_HouseNo" + NowNo + "").val(HouseNo);
 })
 //#endregion
 //弹出对话框
 $("span[id^=HouseNoSpan]").click(function () {
   OpenWin(this)
 })

1. 解决方法
   这里主要用到两个HTMLDOMWindow对象中函数，settimeout(),clearTimeout()。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。具体用法可以自己google或百度下，我就不赘述了。

2. 修改后代码

var timer = null;
$("span[id^=HouseNoSpan]").dblclick(function () {
  clearTimeout(timer);
  $(this).hide();
  var NowNo = $(this).attr("ID").substring("HouseNoSpan".length);
  var TextID = "HouseNoText" + NowNo
  $("#" + TextID + "").show();
  $("#HouseNo" + NowNo + "").select()
})
//弹出对话框
$("span[id^=HouseNoSpan]").click(function () {
  clearTimeout(timer);
  //在单击事件中添加一个setTimeout()函数，设置单击事件触发的时间间隔 
  timer = setTimeout(function () {
   OpenWin(this)
   }, 300);         
})

经过测试以上代码可行,该冲突解决方案主要通过DOM中的setTimeout方法进行判断是单击还是双击