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】一个简单的贪婪爬虫
这个爬虫的作用是,对于一个给定的url,查找页面里面所有的url连接并依次贪婪爬取 主要需要注意的地方: 1.lxml.html.iterlinks() 可以实现对页面所有url的查找 2.获取页面 ...
- JavaScript、Jquery选择题
尚学堂Java EE软件工程师认证考试 试题库-选择题 一. 选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是( )(选择一项) A. numb_1 ...
- OGNL表达式struts2标签“%,#,$”
一.什么是OGNL,有什么特点? OGNL(Object-Graph Navigation Language),大概可以理解为:对象图形化导航语言.是一种可以方便地操作对象属性的开源表达式语言.OGN ...
- hrbustoj 1161:Leyni(树状数组练习)
LeyniTime Limit: 3000 MS Memory Limit: 65536 KTotal Submit: 260(59 users) Total Accepted: 80(55 user ...
- Visual Studio一秒变Node.js IDE
(此文章同时发表在本人微信公众号"dotNET每日精华文章") 上个月微软发布了一个插件,可以让Visual Studio一秒变身最强大的Node.js开发工具.现在源代码移到了G ...
- BLUEZ测试报告
测试小分队介绍: 马辰,李孟,罗凡 测试任务分类 帮助类 战斗类 道具类 敌军类 英雄类 地图类 AboutScene.h AchieveLayers.h GameLoading.h GameOver ...
- SQLServer2008 和SQLServer2008 R2版本导出 数据库结构和数据sql
①SQLServer2008 版本导出 数据库结构和数据sql ②SQLServer2008R2 版本导出 数据库结构和数据sql 采集 #HUABAN_WIDGETS .HUABAN-red-nor ...
- 2016"百度之星" - 初赛(Astar Round2A) 1004 D Game 区间DP
D Game Problem Description 众所周知,度度熊喜欢的字符只有两个:B 和D. 今天,它发明了一个游戏:D游戏. 度度熊的英文并不是很高明,所以这里的D,没什么高深的含义,只 ...
- 【框架】RefreshListView下拉刷新
布局: <com.example.administrator.d30_myrefreshlistview.RefreshListView android:id="@+id/refres ...
- 如何扫描出Android系统媒体库中视频文件
Android系统启动时会去扫描系统文件,并将系统支持的视频文件(mp4,3gp,wmv)扫描到媒体库(MediaStore)中,下面代码演示如何获得这些文件的信息: publicstatic Lis ...