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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 Javascript
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python如何使用argparse模块处理命令行参数
2019/12/11 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
白酒市场营销方案
2014/02/25 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Python破解极验滑动验证码详细步骤
2021/05/21 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
使用Redis实现分布式锁的方法
2022/06/16 Redis