js鼠标单击和双击事件冲突问题的快速解决方法

更新时间：2016年07月11日 10:24:50 投稿：jingxian

下面小编就为大家带来一篇js鼠标单击和双击事件冲突问题的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

情况一

如果在一个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>区分单击和双击-www.jb51.net</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鼠标单击和双击事件冲突问题的快速解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js substr、substring和slice使用说明小记
关于substr、substring和slice方法区别的文章，网上搜到了许多，文章内容也基本一致。而后，我将其中一篇文章中的代码挪到本地进行了测试，发现测试结果和原文中的有些出入。
2011-09-09
js判断两个数组是否存在相同元素的四种方法
这篇文章主要给大家介绍了关于js判断两个数组是否存在相同元素的四种方法,js中是不能直接用==或者===来计算两个数组是否相等的,那么就需要对数组的值进行比较,需要的朋友可以参考下
2023-07-07
javascript关键字加亮加连接
我想在页面里把想要的关键词加亮凸出(用颜色区分出来)显示,这样让客户一眼能看到重的东西,然后在加亮的关键词上可以加上超连接.请问高手们怎么实现宋的功能.就像搜索引擎的那种..搜索关键词的时候就显示红色的.
2008-06-06
javascript数组快速打乱重排的方法
本文介绍了利用Array.prototype.sort方法和Math.random()实现快速打乱数组的方法，大家参考使用吧
2014-01-01
解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题
问题是这样的input 获取焦点时会自动调起手机键盘，设置 :adjust-position="true"，会导致键盘弹起时页面整体上移，这篇文章主要介绍了解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题,，需要的朋友可以参考下
2022-08-08
JS实现网页烟花动画效果
这篇文章主要为大家详细介绍了JS实现网页烟花动画效果，点击鼠标烟花向四周扩散，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
javascript如何返回字符串的所有排列
这篇文章主要介绍了javascript如何返回字符串的所有排列问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Javascript 键盘事件的组合使用实现代码
Javascript 键盘事件的组合使用实现代码，需要的朋友可以参考下
2012-05-05
JS预览图像将本地图片显示到浏览器上
本代码从file域获取本地图片url并将本地图片显示到浏览器上，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08
省市区三级联动下拉框菜单javascript版
这篇文章主要给大家介绍了javascript实现省市区三级联动下拉框菜单，有需要的朋友可以参考下
2015-08-08