jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题

其他 2018-07-20 16:09:14 阅读次数: 0

最近做项目遇到一个问题，给元素绑定了单击事件，但是双击该元素时同样会触发单击事件，并且触发两次的问题，网上找了解决办法基本上都是用 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%;">201721</th>
									<th class="td_title" style="width:8%;">201722</th>
									<th class="td_title" style="width:8%;">201723</th>
									<th class="td_title" style="width:8%;">201724</th>
									<th class="td_title" style="width:8%;">201725</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

猜你喜欢

转载自blog.csdn.net/zyg1515330502/article/details/80897895
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022