javascript双击事件取消默认的两次单击事件
当一个元素同时具有单击和双击事件时，双击时会触发2次单击和1此双击事件。
双击会：先第1次单击 ，同时触发第2次和双击事件。
造成的不好影响：每次单击事件会延迟执行。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var id;
window.onload = function () {
document.getElementById('divdemo').onclick = function () {
//清除的是双击事件的第2次单击事件id
clearTimeout(id);//这句代码放setTimeout下面，也同样将下面的定时器关掉。
id = setTimeout(function () {//不论单双击，每点击一次就会立马产生一个定时器id，产生的id和这个定时器执行与否（什么时候执行）没有关系。
alert(id);//单击操作
}, 300);
//clearTimeout(id);
}
document.getElementById('divdemo').ondblclick = function () {
//清除的是双击事件的第1次单击事件id
clearTimeout(id);
alert(id);//双击操作
}
}
</script>
</head>
<body>
<div id="divdemo" style="width: 400px; height: 400px; background-color: red">
</div>
</body>
</html>
只有单击，
<script type="text/javascript">
var id;
window.onload = function () {
document.getElementById('divdemo').onclick = function () {
//清除的是双击事件的第2次单击事件id
//clearTimeout(id);//这句代码放setTimeout下面，也同样将下面的定时器关掉。
id = setTimeout(function () {//不论单双击，每点击一次就会立马产生一个定时器id，产生的id和这个定时器执行与否（什么时候执行）没有关系。
alert(id);//单击操作
}, 300);
clearTimeout(id);//只有单击时，只能放这，才会让单击事件不执行
}
}
</script> <body>
<div id="divdemo" style="width: 400px; height: 400px; background-color: red">
</div>
</body>
javascript双击事件取消默认的两次单击事件的更多相关文章
- Angular JS中双击事件ng-dblclick避免同时触发两次单击事件ng-click的解决方案
有些需求中,需要一个元素上既有双击事件,也有单击事件,而两者实现的效果不一样. 这时可以使用ng-dblclick与ng-click来实现需求,但是要避免浏览器将双击事件误认为是两次单击事件,从而出现 ...
- jQuery 双击事件（dblclick）时，不触发单击事件(click)
我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...
- JQuery如何实现双击事件时不触发单击事件
单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...
- [转]jQuery 双击事件（dblclick）时，不触发单击事件(click)
例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...
- jquery双击事件会触发单击事件
实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...
- 一个取消事件的简单js例子(事件冒泡与取消默认行为)
先上代码: <div id='outer' onclick='alert("我是outer")'> <div id="middle" oncl ...
- JQuery如何实现双击事件时不触发单击事件，解决鼠标单双击冲突问题
在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...
- JS中双击和单击事件冲突解决
在JS中代码中同一功能块中通常同时会用到单击.双击事件,但通常会遇到一个问题,就是在双击的时候即执行了一次双击事件,而且还执行了两次单击事件.此类冲突在ZTree.DHTMLX中经常遇到. 想要解决两 ...
- GridView中添加行单击事件.md
[toc] 1.使用说明 1.方法来源 该方法主要参考StackOverflow上面的答案和下面这篇文章 http://www.codeproject.com/Articles/15677/Click ...
随机推荐
- php的socket通信（二）
案例一:代码详解 // 设置一些基本的变量$host = "192.168.1.99";$port = 1234;// 设置超时时间set_time_limit(0);// 创建一 ...
- 【读书笔记】读《JavaScript模式》 - 函数复用模式之现代继承模式
现代继承模式可表述为:其他任何不需要以类的方式考虑得模式. 现代继承方式#1 —— 原型继承之无类继承模式 function object(o) { function F() {}; F.protot ...
- hdu 1012:u Calculate e（数学题，水题）
u Calculate e Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- Servlet跳转方式
servlet之间的跳转,有两种方式: 1.redirect方式,是新的请求,数据不相同 2.forward方式是同一个请求,数据相同
- 利用jquery给指定的table动态添加一行、删除一行
转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...
- php中count获取多维数组长度的方法
转自:http://www.jb51.net/article/57021.htm 本文实例讲述了php中count获取多维数组长度的实现方法.分享给大家供大家参考.具体分析如下: 先来看看下面程序运行 ...
- Android 下载文件 显示进度条
加入两个权限 一个是联网,另一个是读写SD卡 <uses-permission android:name="android.permission.INTERNET">& ...
- 数学 赛码 1010 GCD
题目传送门 /* 数学:官方题解 首先,数组中每个元素至少是1 然后对于任意一个询问Li, Ri, Ansi, 说明Li ~ Ri中的元素必定是Ansi的倍数,那么只需将其与Ansi取最小公倍数即可 ...
- WPF 碰撞检测
have tested this, it worked, at least for me var x1 = Canvas.GetLeft(e1); var y1 = Canvas.GetTop(e1) ...
- BZOJ3749 : [POI2015]Łasuchy
设f[i][S]表示第i份食物被两个人吃的状态为S是否有可能,枚举f[1][]的情况后检验 f[i][0]=(f[i-1][1]&a[i-1]>=a[i])|(f[i-1][3]& ...