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 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
JSON 数据格式介绍
Jan 13 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
Javascript节点关系实例分析
May 15 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
微信小程序实现聊天室
Aug 21 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
php微信开发之上传临时素材
2016/06/24 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
学习jQuey中的return false
2015/12/18 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
python实现word 2007文档转换为pdf文件
2018/03/15 Python
pandas string转dataframe的方法
2018/04/11 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
python基于win32api实现键盘输入
2020/12/09 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
Linux的主要特性
2016/09/03 面试题
《与朱元思书》的教学反思
2014/04/17 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
同学聚会通知短信
2015/04/20 职场文书
初中政教处工作总结
2015/08/12 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏