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 相关文章推荐
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
javascript使用call调用微信API
Dec 15 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
javascript编写简易计算器
May 06 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
原生javascript实现的全屏滚动功能示例
Sep 19 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
js实现旋转的星空效果
2019/11/01 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
用python实现批量重命名文件的代码
2012/05/25 Python
python实现的简单抽奖系统实例
2015/05/22 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python常用数据重复项处理方法
2019/11/22 Python
python已协程方式处理任务实现过程
2019/12/27 Python
python处理写入数据代码讲解
2020/10/22 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
教师研修随笔感言
2014/01/23 职场文书
庆七一活动方案
2014/01/25 职场文书
被告代理词范文
2015/05/25 职场文书
Python如何配置环境变量详解
2021/05/18 Python
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
MySQL学习之基础命令实操总结
2022/03/19 MySQL
MySQL去除密码登录告警的方法
2022/04/20 MySQL
Golang gRPC HTTP协议转换示例
2022/06/16 Golang