jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题
最近做项目遇到一个问题，给元素绑定了单击事件，但是双击该元素时同样会触发单击事件，并且触发两次的问题，网上找了解决办法基本上都是用 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：
项目
结果
编码
序号
编码
项目
单位
201721
201722
201723
201724
201725
方法
仪器
试剂
校准物
0
A
钾
mmol/L
1
B
钠
mmol/L
2
C
钙
mmol/L
3
D
锂
mmol/L
4
E
钠
mmol/L
5
F
钠
mmol/L
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='- B1 | 方法1(直接法)
- B2 | 方法2(间接法)
- B3 | 方法3
- B4 | 方法4(直接法)
- B5 | 其他
- B6 | 方法6
- B7 | 方法7(直接法)
- B8 | 方法8(间接法)
- B9 | 方法9
- B10 | 方法10(直接法)
- B11 | 方法11(间接法)
- B12 | 其他
';
//仪器数据
var instrument_ul_2='- B1 | 仪器1(直接法)
- B2 | 仪器2(间接法)
- B3 | 仪器3
- B4 | 仪器4(直接法)
- B5 | 其他
- B6 | 仪器6
- B7 | 仪器7(直接法)
- B8 | 仪器8(间接法)
- B9 | 仪器9
- B10 | 仪器10(直接法)
- B11 | 仪器11(间接法)
- B12 | 其他
';
//试剂数据
var reagent_ul_3='- B1 | 试剂1(直接法)
- B2 | 试剂2(间接法)
- B3 | 试剂3
- B4 | 试剂4(直接法)
- B5 | 其他
- B6 | 试剂6
- B7 | 试剂7(直接法)
- B8 | 试剂8(间接法)
- B9 | 试剂9
- B10 | 试剂10(直接法)
- B11 | 试剂11(间接法)
- B12 | 其他
';
//校准物数据
var reagent_ul_4='- B1 | 校准物1(直接法)
- B2 | 校准物2(间接法)
- B3 | 校准物3
- B4 | 校准物4(直接法)
- B5 | 其他
- B6 | 校准物6
- B7 | 校准物7(直接法)
- B8 | 校准物8(间接法)
- B9 | 校准物9
- B10 | 校准物10(直接法)
- B11 | 校准物11(间接法)
- B12 | 其他
';document.write("");
$(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 = "";
}
});
});
});