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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
浅谈Javascript中的Function与Object
Jan 26 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
性能优化之代码优化页面加载速度
Mar 01 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vue下拉列表功能实例代码
2018/04/08 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python在控制台输出进度条的方法
2015/06/20 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python删除文本中行数标签的方法
2018/05/31 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python实现canny边缘检测
2020/09/14 Python
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
客服主管岗位职责
2013/12/13 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
个人委托书怎么写
2014/09/17 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Python实现列表拼接和去重的三种方式
2021/07/02 Python