jquery双击事件会触发单击事件
实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大。但是如果同时绑定单击事件和双击事件呢?
其实,只要能够想明白的话,解决方案也比较简单,我们想象一下单击事件执行过程:mousedown, mouseup, click。双击事件的执行过程呢?mousedown, mouseup, click; mousedown, mouseup, click。仔细看,其实双击事件就是执行了两次单击事件,那这种情况下,怎么才能避免触发单击事件呢?
奥秘就在于延迟定时器setTimeout,单击事件延迟执行,如果检测到连续点击的话,就认为是双击事件,不在执行单击事件。
// 单击事件
var timer = null;
$('.mask-body').on('click', '.leaver-student', function () { // 点击输入框展开下拉列表
clearTimeout(timer);
timer = setTimeout(function () {
// 这里采用执行自定义事件的方式
$('.leaver-student').trigger('slide');
}, 300); // 延迟300ms执行单击事件
});
// 双击输入框时可以输入学生姓名 双击事件
$('.mask-body').on('dblclick', '.leaver-student', function (ev) {
ev.stopPropagation();
clearTimeout(timer);
$('.leavers li').trigger('click');
$(this).removeAttr('readonly').val('').focus();
});
由此扩展出去,在触摸屏上触发滑动事件时,为什么没有触发单击事件呢?
事实上采用的是相同的方式,在点击事件时,延迟执行,以便设备确认这次操作究竟是不是真正的点击事件。
jquery双击事件会触发单击事件的更多相关文章
- jQuery 双击事件(dblclick)时,不触发单击事件(click)
我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...
- [转]jQuery 双击事件(dblclick)时,不触发单击事件(click)
例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...
- JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题
在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...
- JQuery如何实现双击事件时不触发单击事件
单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jquery 赋值时不触发change事件解决
$("#optionsId").change(function(){ $("#selectOptionsText").val('测试'); }); $(&quo ...
- js文本框失去焦点事件与按钮单击事件的冲突问题
<input type="text" id="txt" name="txt"/> <input type="bu ...
- ztree根据treeId展开指定节点并触发单击事件
ztree.expandNode(ztree.getNodeByParam("id",treeId,null));//展开指定节点 ztree.selectNode(ztree.g ...
- Vue自定义事件:触发自定义事件
一 项目结构 二 子组件(Mongo.vue) <template> <button @click="eat">按钮</button> < ...
随机推荐
- Golang 端口复用测试
先给出结论: 同一个进程,使用一个端口,然后连接关闭,大约需要30s后才可再次使用这个端口. 测试 首先使用端口9001连接服务端,发送数据,然后关闭连接,接着再次使用端口9001连接服务端,如果连接 ...
- mysql常用函数总结
一.数学函数 abs(x) 返回x的绝对值 bin(x) 返回x的二进制(oct返回八进制,hex返回十六进制) ceiling(x) / ceil(x) 返回不小于x的最小整数值 floor(x) ...
- verilog代码 想法验证---与寄存器输出有关
verilog代码 想法验证---与寄存器输出有关 1. module test_mind( input wire clk, input wire reset, input wire i, outpu ...
- apache配置https协议
安装openssl有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.下面对两种方式均进行详细描述. 一.下载和安装openss 方法一:直接使用openssl安装包 W ...
- dubbo-admin在jdk8下不兼容
参考这里 修改pom.xml webx的依赖改为3..6版 <dependency> <groupId>com.alibaba.citrus</groupId> & ...
- 黄聪:微信小程序(应用号)资源汇总整理(转)
微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...
- python写xml及几个问题
python写xml的库和用法 几个问题: 1.乱码问题 设写入UTF-8编码 write函数增加encoding='utf-8' 2.空元素xml节点简写及完整写 write函数增加 short_e ...
- python学习疑问
1.(已解决) test = [1, 2, 3, 4] ", id(test)) def func(a): ", id(a)) a = a.remove(1) ", id ...
- java高并发编程(四)高并发的一些容器
摘抄自马士兵java并发视频课程: 一.需求背景: 有N张火车票,每张票都有一个编号,同时有10个窗口对外售票, 请写一个模拟程序. 分析下面的程序可能会产生哪些问题?重复销售?超量销售? /** * ...
- Consul之:服务健康监测
服务注册 - 服务进程在注册中心注册自己的位置.它通常注册自己的主机和端口号,有时还有身份验证信息,协议,版本号,以及运行环境的详细资料. 服务发现 - 客户端应用进程向注册中心发起查询,来获取服务的 ...