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 ...
随机推荐
- 【python】lxml查找属性为指定值的节点
假设有如下xml在/home/abc.xml位置 <A> <B id=" name="apple"/> <B id=" name= ...
- Unsupported major.minor version 51.0 在配置/运行Maven工程时,JDK与Maven所引用的jdk版本不一致
在配置Maven工程,部署到tomcat服务器运行的过程中,遇到如下错误: "Unsupported major.minor version 51.0 " 错误原因是由于maven ...
- kvm NET 和 BRIDGE
net: <interface type='network'> <mac address='52:54:00:e1:ac:43'/> <source network='d ...
- useradd mfs -s /sbin/nologin -M
创建用户但不建家目录
- mysql 主主复制(双主复制)+ 配置KEEPALIVED实现热备
binlog-do-db和replicate-do-db表示需要同步的数据库 binlog-ignore-db和replicate-ignore-db表示不需要同步的数据库 云端服务器为master配 ...
- Android中JNI 的一些常用Method说明
Android JNI和NDK关系 1.什么JNI Java Native Interface (JNI)标准是java平台的一部分,它允许Java代码和其他语言写的代码进行交互.JNI 是本地编程 ...
- ytu 2029: C语言实验——温度转换(水题)
2029: C语言实验——温度转换 Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 12 Solved: 10[Submit][Status][Web B ...
- Java Hour 20 Spring
有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为20 Hour,请各位不吝赐教. 今天心情不佳,只 ...
- 我与C++的不解情缘
我是一个老实人,我当时报考C++真的全心是为了自己自考的免考,绝不是为了什么二级证,可是,进行到一半的时候,突然获悉,C++自我们这次开始,不作为免考科目了,当时我的心里啊,那个纠结,那个痛啊,随后, ...
- matlab中的ishghandle
ishghandle True for Handle Graphics object handles. ishghandle(H) returns an array that contains 1's ...