jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题
2024-04-17 06:22:44
最近做项目遇到一个问题，给元素绑定了单击事件，但是双击该元素时同样会触发单击事件，并且触发两次的问题，网上找了解决办法基本上都是用 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
jQuery —— 元素绑定单击事件（click），但是双击该元素也能触发单击事件，同时会触发两次单击事件的问题相关推荐
- jQuery 双击事件（dblclick）时，不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那 ...
- 双击事件（dblclick）时，不触发单击事件(click) 1
事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click).即一个标签元素(如button等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击 ...
- 移动端事件 click touch tap swiper 点击穿透的问题
click事件 click事件在移动端会有200-300ms的延迟,是因为手机上双击屏幕,缩放功能的存在.在手机上打开页面,快速双击时,页面会被放大.所以当你在点击第一次的时候,系统会等200-300 ...
- 给html元素绑定单击和双击事件
1 直接绑定时 双击函数被触发时 单击函数也会被触发 而且是先被触发两次 <div class="test" οnclick="test()" οndbl ...
- html绑定多个事件,jquery可以给多个元素绑定同一事件吗？
jquery可以给多个元素绑定同一事件吗?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery可以给多个元素绑定同一事件吗? jquery可以给多 ...
- 动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素 但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...
- html 未来元素绑定事件,jquery on如何给未来元素绑定事件？
我们要想在一个元素上绑定一个事件,那么这个元素必须先存在,也就是绑定事件动作前就已有这个元素. 这是一个给元素绑定任何事件的前提. 如果按照这种思路走,那么"给未来元素绑定事件"将 ...
- jQuery给动态添加的元素绑定事件的方法
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- html移除click事件绑定,带你了解JQuery中绑定事件（bind()）和移除事件（unbind()）...
本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享,这里推荐给有需要的小伙伴们参考下. 有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事 ...
最新文章
- 无厘头的mysql故障排除
- 【Android 组件化】路由组件 ( 使用 JavaPoet 生成路由表类 )
- Golang 的Gin框架入门教学
- VUE从零开始系列（路由钩子及插件开发），呆萌小白上手VUE
- PHP数组传递给JavaScript以及json_encode的gbk中文乱码的解决
- Java防止Xss注入json_浅谈 React 中的 XSS 攻击
- cad隐藏图层命令快捷键_cad快捷键f是什么命令？cad中f快捷键都有哪些？
- ps计算机按键.,计算机一级Photoshop视图操作快捷键
- 计算机网络由边缘和( )两大部分组成,计算机网络期末总复习资料分章节
- Windows via C/C++ 学习（8）CreateProcess 函数
- pom文件配置多个远程仓库地址_分布式配置中心Config
- php改变文件模式的函数,php chmod 函数 改变文件模式
- win hook codeproject
- 类似Windows开始菜单的右键菜单
- 帮我写一段描写时间过得很快，但是自己又很不想时间过得那么快的小作文
- 番茄时钟（提升专注力，减少中断）- 番茄工作法
- 2021-06-08实验室如何正确选择和确认检测方法？
- 95后程序员月薪2万带着电脑送外卖 不想35岁就被社会淘汰 你呢
- windows getLastError 错误码大全
- Git 不可不知的常识 （1）