对一个元素 同时添加单击onclick 和 双击ondblclick 触发冲突的解决
需求说明:单击列表项内容后,吧啦吧啦,双击列表项内容后,巴拉巴拉巴拉~~~
解决思路:卧槽 ,其实我是没思路的,当时唯一的想法就是,看个人点击鼠标的速度了,双击快一点,触发双击事件ლ(′◉❥◉`ლ),其实我真的错了因为双击的时候总是触发单击事件 ε=(´ο`*)))唉,真正解决这个问题后,才知道需要弄个延时标志,利用定时器延迟执行onclick事件来实现双击过程中会取消中途触发的单击事件,我这事后诸葛亮也没sei了吧O(∩_∩)O哈哈~5,老规矩 上代码
代码:
页面上的调用:
th:onclick="|dictDetail('${list.name}')|"
th:ondblclick="|clickRow('${list.id}')|"
js代码:
var timeflag = null; //定义延时标志 强调一点 因为 单击 双击 是在两个方法中, 所以要用到的延时标志只能定义在全局而不能定义在方法中
function dictDetail(dictName) {
if(timeflag) {
window.clearTimeout(timeflag);
timeflag= null;
}
timeflag = window.setTimeout(function(){
//函数体 你要做的那些事的代码 比如说弹个框啊, ajax去后台啊,各种
//代码
//代码
}, 300); //300是设置的延时
}
function clickRow(id) {
if(timeflag) {
window.clearTimeout(timeflag);
timeflag = null;
}
//函数体 你要做的那些事的代码 比如说弹个框啊,ajax去后台啊,各种
}
简单说明一下:我页面用的是thymeleaf模板,所以onclick 前边会有th 以及后面引号中的竖线。
总结:做这个功能的时候没想那么多,演示的时候才发现,双击的时候,总是触发单击事件,非手速问题,是我想得简单了,看了各种网上的资料最后才解决。
大佬链接:https://my.oschina.net/jsan/blog/123181
标签:
JS
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)