单击事件是指鼠标发生一次点击事件,经历了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出去。