【转】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的 ...
随机推荐
- Storm的基本概念
Storm的基本概念 Topology:拓扑,也俗称一个任务,类似于MapReduce中的job.将Spout.Bolt整合起来的拓扑图.定义了Spout和Bolt的结合关系.并发数量.配置等等. S ...
- 110、通过案例学习Secret (Swarm17)
参考https://www.cnblogs.com/CloudMan6/p/8098761.html 在下面的例子中,我们会部署一个 WordPress 应用,WordPress 是流行的开源博客 ...
- Spingboot使用log4j2
1.pom.xml加入log4j2,并同时把spring boot默认的logging去掉,注意一定要全部排除否则会报错. <dependency> <groupId>org. ...
- Java程序员常用的Linux命令01——linux命令基础
1.显示日期的命令date 显示日期: [root@localhost ~]# date 显示年月日: [root@localhost ~]# date '+%Y%m%d' 2.显示日历指令cal 显 ...
- js 继承的简单理解
什么是继承 js中的继承就是获取存在对象已有属性和方法的一种方式. 继承一 属性拷贝 就是将对象的成员复制一份给需要继承的对象. // 创建父对象 var superObj = { name:'liy ...
- skywalking 6.1 简明指南
skywalking 分布式系统的应用程序性能监视工具,专为微服务.云本机架构和基于容器(Docker.K8s.Mesos)架构而设计 背景 随着微服务架构的流行,一些微服务架构下的问题也会越来越突出 ...
- maven 学习之路一
一.mave介绍: maven :我的理解就是一个代码构建管理的一个工具.类似的工具有gradle,ant等. 官方理解:Apache Maven is a software project mana ...
- dedecms织梦网站本地迁移到服务器后,后台更新栏目文档提示模板文件不存在,无法解析文档!的解决办法
解决办法: 1.系统设置-系统基本参数-站点设置-网页主页链接,替换为空 2.系统设置-系统基本参数-核心设置-DedeCMS安装目录,替换为空
- maven私仓搭建——nexus3
maven私仓搭建——nexus3本文主要介绍maven私仓在windows下的搭建.本文主要参考:http://www.cnblogs.com/bingyeh/p/5913486.html好,下面上 ...
- excel匹配相应条件 自动填充数据
=VLOOKUP(A6&B6,IF({1,0},Sheet3!$A$3:$A$505&Sheet3!$B$3:$C$505,Sheet3!$Q$3:$Q$505),2,0) =VLOO ...