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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
input按钮的事件处理大全
Dec 10 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
js实现单击图片放大图片的方法
Feb 17 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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
基于php iconv函数的使用详解
2013/06/09 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python使用pandas处理excel文件转为csv文件的方法示例
2019/07/18 Python
在Django中实现添加user到group并查看
2019/11/18 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
总监职责范文
2013/11/09 职场文书
前台接待的工作职责
2013/11/21 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
大三学生入党思想汇报
2014/01/02 职场文书
思想品德课教学反思
2014/02/10 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
学校教师安全责任书
2014/07/23 职场文书