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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php生成图片缩略图的方法
2015/04/07 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
python中常用检测字符串相关函数汇总
2015/04/15 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python多线程下载文件的方法
2015/07/10 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
python实现图片转字符小工具
2019/04/30 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
研讨会通知
2015/04/27 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
辅导员学期工作总结
2015/08/14 职场文书
我收到了德劲DE1107
2022/04/05 无线电