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 相关文章推荐
chrome下jq width()方法取值为0的解决方法
May 26 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
微信小程序实现tab切换效果
Nov 21 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
详解puppeteer使用代理
Dec 27 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
一行python实现树形结构的方法
2019/08/09 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
python利用opencv保存、播放视频
2020/11/02 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
应届大学生的推荐信
2013/11/20 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
实验室标语
2014/06/21 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python