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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
详解JavaScript中的链式调用
Nov 27 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一个找二层目录的小东东
2012/08/02 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
javascript 二分法(数组array)
2010/04/24 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
python装饰器decorator介绍
2014/11/21 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
Java工程师面试集锦之Spring框架
2013/06/16 面试题
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
企业给企业的表扬信
2014/01/13 职场文书
奥利奥广告词
2014/03/20 职场文书
优秀员工推荐信
2014/05/10 职场文书
校园运动会广播稿
2014/10/06 职场文书
思想作风建设心得体会
2014/10/22 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫