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 相关文章推荐
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
vue组件父与子通信详解(一)
Nov 07 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
vue-rx的初步使用教程
Sep 21 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
原生JavaScript实现五子棋游戏
Nov 09 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报表之jpgraph柱状图实例代码
2011/08/22 PHP
PHP插入排序实现代码
2013/04/04 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
python 判断自定义对象类型
2009/03/21 Python
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python操作redis方法总结
2018/06/06 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
对Python中画图时候的线类型详解
2019/07/07 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python3常用内置方法代码实例
2019/11/18 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
如何通过jdbc调用存储过程
2012/04/19 面试题
影视制作岗位职责
2013/12/04 职场文书
高三地理教学反思
2014/01/11 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
食品业务员岗位职责
2014/03/18 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
学校班班通实施方案
2014/06/11 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
学校学期工作总结
2015/08/13 职场文书
工商局调档介绍信
2015/10/22 职场文书