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实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue实现简单图片上传
Jun 30 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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中的实现trim函数代码
2007/03/19 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP实现百度人脸识别
2019/05/06 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
Mootools 1.2教程 事件处理
2009/09/15 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
Java Mybatis框架入门基础教程
2015/09/21 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python类继承与子类实例初始化用法分析
2015/04/17 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Django权限控制的使用
2021/01/07 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
买卖合同协议书范本
2014/10/18 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
关于Vue中的options选项
2022/03/22 Vue.js
MySQL 数据表操作
2022/05/04 MySQL