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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
符合标准的js表单提交的代码
Sep 13 Javascript
快速排序 php与javascript的不同之处
Feb 22 Javascript
jQuery制作效果超棒的手风琴折叠菜单
Apr 03 Javascript
基于javascript编写简单日历
May 02 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
解决vue自定义全局消息框组件问题
Nov 22 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
OpenLayers3实现测量功能
Sep 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+mysql 实现身份验证代码
2010/03/24 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
js 操作符实例代码
2009/10/24 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
提升页面加载速度的插件InstantClick
2017/09/12 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
python 多线程应用介绍
2012/12/19 Python
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
我爱我的祖国演讲稿
2014/05/04 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书
python 网络编程要点总结
2021/06/18 Python
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技