js判断鼠标单击或者双击事件 冲突问题的解决方法
单击事件是指鼠标发生一次点击事件，经历了onmousedown,onmouseup,onclick的过程；双击事件是指鼠标连续在同一位置连续点击两次，经历了onmousedown，onmouseup，onclick，onmousedown，onmouseup，onclick，ondblclick的过程；以下代码验证了这一点：
<!DOCTYPE html><html><head>
<title></title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="test1()" ondblclick="test2()" value="点击">
<script type="text/javascript">
function test1 () {
console.log('单击');
} function test2 () {
console.log('双击');
} </script></body></html>发生单击：
发生双击：
所以呢 如果想要单独处理点击和双击的事件怎么办，这里我在网上大概了解了三个例子，分享出来顺便整理一下：
方法一：
<!DOCTYPE html><html><head>
<title>判断单击or双击</title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="test()" ondblclick="test()" value="点击">
<div id="mxh"> </div>
<script type="text/javascript">
function test() {
if(event.type == "dblclick")
document.all.mxh.innerText = "你双击了我"; if(event.type == "click")
document.all.mxh.innerText = "你单击了我";
}
</script></body></html>这是一个笨办法，也就是通过事件的类型来判断是单击还是双击，然后将结果存到一个div里，结束后取div里的值来判断是哪种类型。
方法二：
<!DOCTYPE html><html><head>
<title>判断单击or双击</title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="aa()" ondblclick="bb()" value="点我">
<script type="text/javascript">
var timer = null;
function aa() {
clearTimeout(timer);
if (event.detail == 2) return ;
timer = setTimeout(function() {
console.log('单击');
}, 300);
}
function bb() {
clearTimeout(timer);
console.log('双击');
} </script></body></html>分别来解释吧。
单击：用户单击触发aa函数，清除定时器这个先不管，if里的意思是如果在同样的地方执行同种方法两次，也就是双击的意思，退出这个函数，单击嘛不会触发if。下来给定时器赋值，300ms后执行输出单击的这句话，如果单击的话就不会在300ms里触发其他事件，所以单击解释完毕。
双击：用户双击触发两次click和一次dbclick。第一次先执行aa函数，因为这是第一次所以不会return，300ms之间还没有等单击这两个字输出便再次触发了aa函数，次数记为两次，return出去，之后触发bb函数，输出双击两个字。
方法三：
<!DOCTYPE html><html><head>
<title>判断单击or双击</title>
<meta charset="utf-8"></head><body>
<input type="button" onclick="aa()" ondblclick="bb()" value="点我">
<script type="text/javascript">
var isdb;
function aa(){
isdb=false;
window.setTimeout(cc, 500); function cc(){
if(isdb) return;
alert("单击")
}
}
function bb(){
isdb=true;
alert("双击")
}
</script></body></html>先设定一个判断变量，定义三个函数aa，bb，cc。
单击：进入aa函数，设置判断变量为false，设置一个定时器，500ms后触发cc函数，因为是单击所以之后没有了多余的操作，进而顺利进入cc函数，判断变量如果为真说明进入过bb函数也就是执行过dbclick的步骤，所以return，然而这里直接跳过去执行了输出单击的操作。
双击：进入aa函数，将判断变量赋值为false，设置定时器，500ms之内又进入了aa函数然而一直没有执行cc函数，之后又执行了bb函数，设置了判断变量为真值，弹出双击二字，这时才开始进入cc函数，因为判断变量为真值，所以两次都会return出去。
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>
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
