【转】jQuery - 同时添加click和dblclick事件
1、问题描述
最近在做H5视频播放器,有这样的需求:点击视频播放界面可以:暂停/播放,双击视频可以:全屏/退出全屏,但是同时绑定click和Dblclick会有冲突,双击的时候每次都会执行两次click,一次Dblclick这明显不符合要求,于是在网上查找解决办法。
2、解决思路
添加事件的代码比较简单,有两种方法:
- $("abc").bind({"click":fn,"dblclick":fn});
- $("abc").click(fn).dblclick(fn)
目前的问题是无论双击或者单击都只执行单击的function,为什么呢?
下面我们说一下双击的机制:
双击(dblclick)的流程是:mousedown,mouseout,click,mousedown,mouseout,click,dblclick;
要想实现双击我们必须屏蔽这两次click,因此我们在click里面设置一个定时器,延迟执行function。
3、代码样例
var _time = null;
$(this).find("tr").dblclick(function(e){
clearTimeout(_time);
console.log("dblclick");
//真正双击代码 }).click(function(e){
clearTimeout(_time);
_time = setTimeout(function(){
console.log("click");
//单击事件在这里 }, 300);
});
4、参考网站
【转】jQuery - 同时添加click和dblclick事件的更多相关文章
- jQuery - 同时添加click和dblclick事件
添加事件的代码比较简单,有两种方法: $("abc").bind({"click":fn,"dblclick":fn}); $(" ...
- Jquery动态添加的元素绑定事件的3种方法
假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...
- jQuery类名添加click方法
通过$("").jQuery为元素添加点击事件,在使用类的情况下,可以使用$(e.target).attr('title');获得被点击元素的属性值. 示例代码如下 $(" ...
- angular JS中使用jquery datatable添加checkbox点击事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...
- JQuery知识快览之二—事件
事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...
- jQuery对 动态添加 的元素 绑定事件(on()的用法)
从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...
- jQuery给动态添加的元素绑定事件的方法
我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv"> <ul></ul> </d ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
随机推荐
- C++参数传递与STL
C++参数传递与STL 这是一篇备忘录形式的内容,涉及到的内容比较基础 今天写了一个小算法,用一个set在函数间传递,记录各个函数中的结果.但是最后结果显示set中的元素是0个.查了一下才发现,用来C ...
- springboot的一些注解
springboot注解以及一些晦涩难理解的点介绍 @Validated 用于注入数值校验的注解(JSR303数据校验) @PropertySource 用于加载指定的配置文件,例如@Property ...
- 一个页面多图表展示(四个div的方式)
效果如图所示,一个页面四个div,每个div里面展示相应的数据,因为这种效果会有点麻烦,而且不太雅观我就换了一种写法,一个div里面用四个图表,共用一个图例,先放上这个方式的效果图和源码,后期会再发布 ...
- Tcp之心跳包
Tcp之心跳包 心跳包 跳包之所以叫心跳包是因为:它像心跳一样每隔固定时间发一次,以此来告诉服务器,这个客户端还活着. 事实上这是为了保持长连接,至于这个包的内容,是没有什么特别规定的,不过一般都是很 ...
- pl/sql 笔记之基础(上)
由于公司中使用 oracle,而本人对存储过程一直也懵懵懂懂,故一周时间学习了一遍 pl/sql,在此记下笔记!!! 一.前提,pl/sql 是啥? 1.PL/SQL是一种高级数据库程序设计语言,该语 ...
- 设置Windows静态IP+动态IP
静态IP 设置以太网属性 进入IPv4属性 设置IPv4 动态IP 同上方法,只不过选成了自动
- 基于nginx与Tomcat实现负载均衡
server1:192.168.200.113(nginx服务端) server2:192.168.200.111(Tomcat服务端) server1中nginx的配置文件 nginx.conf h ...
- 4G漏洞
4G VoLTE漏洞:可致用户地理位置和其它个人信息泄露 2017-08-05 LBS 首先要了解下,什么是VoLTE. VoLTE为英文Voice Over LTE的缩写,直译就是音频通过LTE网络 ...
- 微信小程序(7)--微信小程序连续旋转动画
微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...
- 第01章 重置 root 管理员密码
确定是否为 RHEL 7 系统 重启 Linux 系统主机并出现引导界面时,按下键盘上的 e 键进入内核编辑界面,如图 146 所示. 在 linux16 参数这行的最后面追加“rd.break” ...