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加ASP二级域名转向的代码
May 17 Javascript
js获取浏览器的可视区域尺寸的实现代码
Nov 30 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
浅谈layui 表单元素的选中问题
Oct 25 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利用反射实现插件机制的方法
2015/03/14 PHP
PHP的全局错误处理详解
2016/04/25 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
Django的session中对于用户验证的支持
2015/07/23 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python调用C语言的实现
2019/07/26 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
中介公司区域经理岗位职责范本
2014/03/02 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
品德评语大全
2014/05/05 职场文书
法人授权委托书
2014/09/16 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
golang 实用库gotable的具体使用
2021/07/01 Golang