js鼠标单击和双击事件冲突问题的快速解决方法


Posted in Javascript onJuly 11, 2016

情况一

如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox)。

解决方法:

<button onclick="test(1)" ondblclick="test(2)"></button>
<script language="javascript">
var i = 1;
function test(n)  {
i = n; 
var val = setTimeout("call();",250); 
if(i==2){
clearTimeout(val);
}
}
function  call()  { 
if(i==1){
alert('click');
}else if(i==2){
alert('dblclick');
}
} 
</script>

解释:

第一次点击记录下点击的时间,并设置单击事件的Timeout(250ms比较合适),第二次点击时判断此时点击的时间与上次点击的时间间隔,如果小于指 定的事件间隔(比如250ms),则判断为双击事件,并clear已设置的Timeout(避免触发单击事件)。

第二种:

<title>区分单击和双击-3water.com</title>
<script type="text/javascript">
var flag=0;
function clickTest()
{
 if(!flag)
 {
 setTimeout("tt2();",300);
 }
 flag++;
}
function reset()
{
 flag=0;
}
function singleClick()
{
 var result=document.getElementByIdx_x('result');
 result.innerHTML=result.innerHTML+"click<br>";
 reset();
}
function dobuleClick()
{
 var result=document.getElementByIdx_x('result');
 result.innerHTML=result.innerHTML+"dobule click<br>";
 reset();
}
function tt2()
{
 if(flag==1)
 {
 singleClick();
 }
 else
 {
 dobuleClick();
 }
}
</script>
</head>
<body>
<input type="button" ondblclick="clickTest();" onclick="clickTest();" value="click test" />
<div id="result"></div>

以上这篇js鼠标单击和双击事件冲突问题的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
了不起的node.js读书笔记之node的学习总结
Dec 22 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
React 并发功能体验(前端的并发模式)
Jul 01 Javascript
js 弹出对话框(遮罩)透明,可拖动的简单实例
Jul 11 #Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 #Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 #Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 #Javascript
Bootstrap实现弹性搜索框
Jul 11 #Javascript
Summernote实现图片上传功能的简单方法
Jul 11 #Javascript
JavaScript中setter和getter方法介绍
Jul 11 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP 日期加减的类,很不错
2009/10/10 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
php实现简单的上传进度条
2015/11/17 PHP
php curl常用的5个经典例子
2017/01/20 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
Python 的 Socket 编程
2015/03/24 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
自动化专业本科毕业生求职信
2013/10/20 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
婚礼答谢词范文
2015/09/29 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript