最近做项目遇到一个问题，给元素绑定了单击事件，但是双击该元素时同样会触发单击事件，并且触发两次的问题，网上找了解决办法基本上都是用 clearTimeout 、setTimeout解决，但是效果不是很理想，因为用到了layer弹窗，最后自己想了一种办法解决：
思路：1、定一个全局变量，例如：var lastTimeClickInputId;
2、获取该元素的id，点击该元素的时候做判断，
var selectedInp=$(this);
if(lastTimeClickInputId == selectedInp.attr("id")){ //如果是双击就会走这一步
return ;
}
lastTimeClickInputId = selectedInp.attr("id"); //第一次点击的时候已经赋值
3、最后让lastTimeClickInputId = "";
下面的截图是所做项目中一个模块，利用了layer弹窗，随着鼠标点击input框的位置不同，弹窗跟着移动：
html：
<!--第二个弹出框--><div class="inputModal" id="inputModal" style="display:none; width:80%; margin:0 auto; padding-top:20px;"><input type="text" name="username" id="" class="inp" value="" style="width:100%;"/></div>
<table class="tableSb" ><thead><tr><th class="td_title center" colspan="4">项目</th><th class="td_title center" colspan="5">结果</th><th class="td_title center" colspan="6">编码</th></tr></thead><thead><tr><th class="td_title" style="width:4%; ">序号</th><th class="td_title" style="width:4%;">编码</th><th class="td_title" style="width:10%;">项目</th><th class="td_title" style="width:6%;">单位</th><th class="td_title" style="width:8%;">21</th><th class="td_title" style="width:8%;">22</th><th class="td_title" style="width:8%;">23</th><th class="td_title" style="width:8%;">24</th><th class="td_title" style="width:8%;">25</th><th class="td_title" >方法</th><th class="td_title" >仪器</th><th class="td_title" >试剂</th><th class="td_title" >校准物</th></tr></thead><tbody><tr ><td class="td_item1" >0</td><td class="td_item2" >A</td><td class="td_item3" >钾</td><td class="td_item4" >mmol/L</td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data2"><input id="method_1" name="ff1" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="instrument_1" name="yiqi" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="reagent_1" name="shiji" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="calibrator_1" name="jzw" type="text" value="${param.name}" class=" inpWidth" readonly></td></tr><tr ><td class="td_item1" >1</td><td class="td_item2" >B</td><td class="td_item3" >钠</td><td class="td_item4" >mmol/L</td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data2"><input id="method_2" name="ff2" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="instrument_2" name="yiqi" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="reagent_2" name="shiji" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="calibrator_2" name="jzw" type="text" value="${param.name}" class=" inpWidth" readonly></td></tr><tr ><td class="td_item1" >2</td><td class="td_item2" >C</td><td class="td_item3" >钙</td><td class="td_item4" >mmol/L</td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data2"><input id="method_3" name="ff3" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="instrument_3" name="yiqi" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="reagent_3" name="shiji" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="calibrator_3" name="jzw" type="text" value="${param.name}" class=" inpWidth" readonly></td></tr><tr ><td class="td_item1" >3</td><td class="td_item2" >D</td><td class="td_item3" >锂</td><td class="td_item4" >mmol/L</td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data2"><input id="method_4" name="ff4" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="instrument_4" name="yiqi" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="reagent_4" name="shiji" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="calibrator_4" name="jzw" type="text" value="${param.name}" class=" inpWidth" readonly></td></tr><tr ><td class="td_item1" >4</td><td class="td_item2" >E</td><td class="td_item3" >钠</td><td class="td_item4" >mmol/L</td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data2"><input id="method_5" name="ff5" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="instrument_5" name="yiqi" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="reagent_5" name="shiji" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="calibrator_5" name="jzw" type="text" value="${param.name}" class=" inpWidth" readonly></td></tr><tr ><td class="td_item1" >5</td><td class="td_item2" >F</td><td class="td_item3" >钠</td><td class="td_item4" >mmol/L</td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data1"><input id="name" name="name" type="text" value="${param.name}" class=" inpWidth" ></td><td class="td_data2"><input id="method_6" name="ff6" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="instrument_6" name="yiqi" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="reagent_6" name="shiji" type="text" value="${param.name}" class=" inpWidth" readonly></td><td class="td_data2"><input id="calibrator_6" name="jzw" type="text" value="${param.name}" class=" inpWidth" readonly></td></tr></tbody></table>
css：
@charset "UTF-8";.tableSb{width:100%;}.tableSb,.tableSb>thead>tr>th,.tableSb>thead>tr>td,.tableSb>tbody>tr>td,.tableSb>tbody>tr>th {border: 1px solid #ccc;/* text-align: center; *//* padding: 3px; */}.center{text-align:center;}.left{text-align:left;}.right{text-align:right;}.tableSb .inpWidth{width:100%;height:23px;/* text-align:center; */padding: 0px 5px;border:0;/* outline:none; */}.tableSb td , .tableSb th{white-space: nowrap;}.tableSb>tbody>tr>td.td_item1, .tableSb>tbody>tr>td.td_item2, .tableSb>tbody>tr>td.td_item3, .tableSb>tbody>tr>td.td_item4{white-space: nowrap;background: #ccc;border-color:#fff;}ul{margin:0;padding:0;list-style: none;}ul li:hover{background: #DDDDDD;}ul li.active{background: #3c8dbc;}.layui-layer-btn .layui-layer-btn2 {border-color: red;background-color: red;color: #fff;}
js：
list2.js：
//方法数据var method_ul_1='<ul id="method_ul"><li value="B1">B1 | 方法1(直接法)</li><li value="B2">B2 | 方法2(间接法)</li><li value="B3">B3 | 方法3</li><li value="B4">B4 | 方法4(直接法)</li><li value="B5" class="qita">B5 | 其他</li><li value="B6">B6 | 方法6</li><li value="B7">B7 | 方法7(直接法)</li><li value="B8">B8 | 方法8(间接法)</li><li value="B9">B9 | 方法9</li><li value="B10">B10 | 方法10(直接法)</li><li value="B11">B11 | 方法11(间接法)</li><li value="B12" class="qita">B12 | 其他</li></ul>';//仪器数据var instrument_ul_2='<ul id="instrument_ul"><li value="B1">B1 | 仪器1(直接法)</li><li value="B2">B2 | 仪器2(间接法)</li><li value="B3">B3 | 仪器3</li><li value="B4">B4 | 仪器4(直接法)</li><li value="B5" class="qita">B5 | 其他</li><li value="B6">B6 | 仪器6</li><li value="B7">B7 | 仪器7(直接法)</li><li value="B8">B8 | 仪器8(间接法)</li><li value="B9">B9 | 仪器9</li><li value="B10">B10 | 仪器10(直接法)</li><li value="B11">B11 | 仪器11(间接法)</li><li value="B12" class="qita">B12 | 其他</li></ul>';//试剂数据var reagent_ul_3='<ul id="reagent_ul"><li value="B1">B1 | 试剂1(直接法)</li><li value="B2">B2 | 试剂2(间接法)</li><li value="B3">B3 | 试剂3</li><li value="B4">B4 | 试剂4(直接法)</li><li value="B5" class="qita">B5 | 其他</li><li value="B6">B6 | 试剂6</li><li value="B7">B7 | 试剂7(直接法)</li><li value="B8">B8 | 试剂8(间接法)</li><li value="B9">B9 | 试剂9</li><li value="B10">B10 | 试剂10(直接法)</li><li value="B11">B11 | 试剂11(间接法)</li><li value="B12" class="qita">B12 | 其他</li></ul>';//校准物数据var reagent_ul_4='<ul id="calibrator_ul"><li value="B1">B1 | 校准物1(直接法)</li><li value="B2">B2 | 校准物2(间接法)</li><li value="B3">B3 | 校准物3</li><li value="B4">B4 | 校准物4(直接法)</li><li value="B5" class="qita">B5 | 其他</li><li value="B6">B6 | 校准物6</li><li value="B7">B7 | 校准物7(直接法)</li><li value="B8">B8 | 校准物8(间接法)</li><li value="B9">B9 | 校准物9</li><li value="B10">B10 | 校准物10(直接法)</li><li value="B11">B11 | 校准物11(间接法)</li><li value="B12" class="qita">B12 | 其他</li></ul>';
document.write("<script src='static/appjs/example5/list2.js'></script>");$(function() {//执行一个laydate实例，搜索框日期显示laydate.render({elem: '#startTime', //开始的元素showBottom: false //不显示底部栏});var thisCopInput; var lastTimeClickInputId;//方法按钮点击事件$(document).off('click').on('click', '.td_data2 input', function() {var selectedInp=$(this);if(lastTimeClickInputId == selectedInp.attr("id")){return ;}lastTimeClickInputId = selectedInp.attr("id");layer.closeAll();thisCopInput = selectedInp.attr("id");selectedInp.parents('tr').find('.td_data2 input').css('outline','none');selectedInp.parents('tr').siblings().find('.td_data2 input').css('outline','none');selectedInp.css('outline','-webkit-focus-ring-color auto 5px');var offset = selectedInp.offset();var top = (offset.top + 10) + "px";var left =(offset.left + 40) + "px";var offsetVal=[top,left];var layerTitle;var layerContent;var thisIndex=selectedInp.parent().index(); //获取当前点击的单元格在这一行的索引值;var thisTrIndex=selectedInp.parents('tr').index(); //获取当前点击的行的索引值;if(thisIndex==9){layerTitle='请双击选择方法';layerContent= method_ul_1;}else if(thisIndex==10){layerTitle='请双击选择仪器';layerContent= instrument_ul_2;}else if(thisIndex==11){layerTitle='请双击选择试剂';layerContent= reagent_ul_3;}else{layerTitle='请双击选择校准物';layerContent= reagent_ul_4;}var index1 = layer.open({type: 1,title: layerTitle,shade: false,area: ['470px', '300px'],offset: offsetVal,content: layerContent,btn: ['列表没有请点此处', '确定', '复制代码到此处', '清空'],success: function() {//鼠标单击事件$('ul>li').off('click').on('click', function(event) {event.stopPropagation();$(this).addClass('active').siblings().removeClass('active');var value = $(this).attr('value');selectedInp.val(value);});//鼠标双击击事件$('ul>li').off('dblclick').on('dblclick', function(event) {event.stopPropagation();$(this).addClass('active').siblings().removeClass('active');var value = $(this).attr('value');selectedInp.val(value);lastTimeClickInputId = "";layer.closeAll();$(this).removeClass('active');selectedInp.css('outline','none');});},//列表没有请点此处按钮的回调 btn1: function(index, layero) {if(!$('ul>li').hasClass('active')){layer.alert("请先在列表中单击选择一个‘其他’选项，然后再点击此按钮填写！");return;}else{if(!$('ul>li.active').hasClass('qita')) {//alert("请先在列表中单击选择一个'其他'选项，然后再点击此按钮填写！ ");return;} else {$('ul>li').removeClass('active'); //移除选中的元素的样式layer.close(index1); //关闭上一个弹窗var index2 = layer.open({type: 1,title: "按回车键填方法",shade: false,area: ['400px', '150px'],offset: offsetVal,content: $('#inputModal'),btn: ['确定'],btnAlign: 'c', //按钮居中success: function() {$('.inp').focus(); //input自动获取焦点$('.inp').val(''); //清空上一次的值$('.inp').off('keydown').on('keydown', function(event) {var inputVal=$.trim($('.inp').val()); //获取input的值if(event.which ==13){if(inputVal){selectedInp.val( $.trim(selectedInp.val()) + '|' +inputVal);layer.close(index2); //关闭当前弹窗selectedInp.css('outline','none');}else{selectedInp.val( $.trim(selectedInp.val()) );layer.close(index2); //关闭当前弹窗selectedInp.css('outline','none');}}});},//确定按钮事件yes: function(index, layero){var inputVal=$.trim( $('.inp').val() ); //获取input的值if(inputVal){selectedInp.val( selectedInp.val() + '|' +inputVal);layer.close(index2); //关闭当前弹窗selectedInp.css('outline','none');}else{selectedInp.val( selectedInp.val() );layer.close(index2); //关闭当前弹窗selectedInp.css('outline','none');}lastTimeClickInputId = "";}});}}},//确定按钮回调 btn2: function(index, layero) {$('ul>li').removeClass('active');selectedInp.css('outline','none');lastTimeClickInputId = "";},//复制代码到此处按钮回调btn3: function(index, layero) {$('ul>li').removeClass('active');//==============================================================var copInpVal = '';var copInpNum = 0;var idNumArray = thisCopInput.split('_');var idNum = idNumArray[1];var idName = idNumArray[0];for(var i = idNum; i >= 1; i--){var method_Val = $("#"+idName+"_"+i).val();if(method_Val != '' && method_Val != undefined){copInpVal = method_Val;copInpNum = i;break;}}if(copInpVal != '' && copInpNum >0){for(i = copInpNum+1 ;i<= idNum;i++){$("#"+idName+"_"+i).val(copInpVal);}$('.td_data2 input').css('outline','none');//return false //开启该代码可禁止点击该按钮关闭}else{layer.alert("没有复制的内容！");return false //开启该代码可禁止点击该按钮关闭}//==============================================================lastTimeClickInputId = "";},//清空按钮回调btn4: function(index, layero) {selectedInp.val('');$('ul>li').removeClass('active');return false //开启该代码可禁止点击该按钮关闭},//右上角关闭回调cancel: function(){$('ul>li').removeClass('active');$('.td_data2 input').css('outline','none');lastTimeClickInputId = "";}});});});
说明：layer.open() 的content值，如果第一个弹窗content: $('#instrument_ul')是这样赋值的话，点击不同的input第二次点击时弹出框不显示，最后用content: " "为字符串时就没有问题，所以：content: layerContent,直接加载字符串，因此引入list2.js
jQuery —— 元素绑定单击事件（click） 但是双击该元素也能触发单击事件 同时会触发两次单击事件的问题
