特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过。如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/

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事件的更多相关文章

  1. jQuery - 同时添加click和dblclick事件

    添加事件的代码比较简单,有两种方法: $("abc").bind({"click":fn,"dblclick":fn}); $(" ...

  2. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  3. jQuery类名添加click方法

    通过$("").jQuery为元素添加点击事件,在使用类的情况下,可以使用$(e.target).attr('title');获得被点击元素的属性值. 示例代码如下 $(" ...

  4. angular JS中使用jquery datatable添加checkbox点击事件

    'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...

  5. JQuery知识快览之二—事件

    事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...

  6. jQuery对 动态添加 的元素 绑定事件(on()的用法)

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

  7. jQuery给动态添加的元素绑定事件的方法

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  8. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  9. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

随机推荐

  1. node工具之node-ip

    node-ip node.js用来获取id地址的工具 use var ip = require('ip'); ip.address() // my ip address ip.isEqual('::1 ...

  2. Filebeat7 Kafka Gunicorn Flask Web应用程序日志采集

    本文的内容 如何用filebeat kafka es做一个好用,好管理的日志收集工具 放弃logstash,使用elastic pipeline gunicron日志格式与filebeat/es配置 ...

  3. 为什么选择器:last-child有时没有起作用?

    想要有.list样式的最后一个不要下划线.为什么:last-child没有起作用? el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings):第二 ...

  4. php函数之substr()

    问题: 希望从字符串的某个特定位置开始抽取这个字符串的一部分.例如,对于输入到一个表单的用户名,想要得到这个用户名的前8个字符. 解决: 使用substr()选择子串 $substring = sub ...

  5. RAID原理详解

    RAID 0(stripe,条带化存储):在RAID级别中最高的存储性能. 原理:是把连续的数据分散到多个磁盘上存取,系统有数据请求就可以被多个磁盘并行的执行,每个磁盘执行属于他自己的那部分数据请求. ...

  6. Charles中使用Rewrite提高测试效率

    上次给大家演示了Charles中通过Map Local功能来提高测试效率,Charles还有另外一个强大的功能,Rewrite,这次也给大家演示一下. Charles中的Rewrite功能非常强大,可 ...

  7. tcpdump 为何抓包 抓到本机IP 都是内网IP

    接收端 22:49:01.729351 IP 192.168.0.3.21918 > ***.**.**.**.44498 22:49:01.727980 IP ***.**.**.**.444 ...

  8. CF1111E Tree 动态规划+LCT

    这个题的思路非常好啊. 我们可以把 $k$ 个点拿出来,那么就是求将 $k$ 个点划分成不大于 $m$ 个集合的方案数. 令 $f[i][j]$ 表示将前 $i$ 个点划分到 $j$ 个集合中的方案数 ...

  9. 模拟客户端向服务器发起请求(从Fiddler抓包到Jmeter接口测试)

    一.安装Fiddler 二.配置 在菜单栏Tools->Fiddler Options->Connections,勾选Allow remote computers to connect,默 ...

  10. Hihocoder1046K个串(线段树)(待解决)

    描述 兔子们在玩k个串的游戏.首先,它们拿出了一个长度为n的数字序列,选出其中的一个连续子串,然后统计其子串中所有数字之和(注意这里重复出现的数字只被统计一次). 兔子们想知道,在这个数字序列所有连续 ...