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 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
细说Vue组件的服务器端渲染的过程
May 30 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
提高php编程效率技巧
2015/08/13 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
原生JavaScript实现留言板
2021/01/10 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
廉价连衣裙和婚纱礼服在线销售:Tbdress
2019/02/28 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
爱国卫生月实施方案
2014/02/21 职场文书
污水处理保证书
2015/05/09 职场文书
大学新生入学感想
2015/08/07 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书