昨天在做图的痛苦煎熬中,忽然脑子一抽想到了鼠标双击事件(看啊,我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情)。于是鼓捣了两个玩意出来。
第一个代码是自定义鼠标双击事件。我们知道,JavaScript的鼠标双击事件(ondblclick)的判定时间是有阈值的。如果我们想自己定义,例如必须间隔在200毫秒以内才算双击,又比如想把时间间隔延长到1000毫秒。这时候可以自己设置时间阈值,满足条件就执行事件代码:
var click0=null;//第一次点击的时间戳 var clickTimeOut=500;//自定义允许的时间间隔 document.onclick=function () { var d=new Date(); if(click0==null){ click0=d.getTime(); }else{ if(d.getTime()-click0>clickTimeOut){ //console.log("不是双击"); click0=d.getTime(); }else{ console.log("一次双击"); click0=null;//初始化 } } }
这个和浏览器的判定应该是一样的了(至少从结果来看)。这也是数次修改之后的结果,改进的地方有(完全可以不看):
1.把相邻两次单击进行判断。例如鼠标点击了3次,第1次和第2次的间隔超时,第2次和第3次间隔在规定时间内。可以把第2和第3次点击识别为双击,而不是必须1、2判断一次,3、4再判断一次。
2.但是当一次双击事件触发之后,必须再进行至少两次单击才可以触发双击判定。例如3次单击间隔都在规定范围内,在把第1次和第2次识别为双击之后,不会把第3次和第2次连起来,认为又是一次双击。
第二个代码是测试浏览器双击事件的时间间隔阈值(这个已经没用了)。
var click0=null; document.onclick=function () { var d=new Date(); if(click0==null){ click0=d.getTime(); } console.log(d.getTime()-click0); click0=d.getTime(); } document.ondblclick=function (argument) { console.log("触发了一次双击,上面最后一个数字是两次点击间隔时间(毫秒)。"); }
当触发了一次双击事件的时候,查看控制台里最后显示的数字,这是两次点击的间隔时间。多次测试就能找到双击事件的阈值了。
以上代码均可粘贴到控制台执行,并且都是在控制台查看结果的。
补充:
操作系统中可以对鼠标双击快慢进行设置,经测试,浏览器中判定双击的时间阈值和此处的设置保持一致。有了这个变数,本文就更加有必要了(强行给自己贴金)
其实上面测试阈值实在是然并卵,在注册表HKEY_CURRENT_USER\Control Panel\Mouse中有以下项:
"DoubleClickSpeed"="500"
"DoubleClickHeight"="4"
"DoubleClickWidth"="4"
这是windows的默认值。也就是说默认情况下双击有效区域应该是一个4*4的方块,时间间隔在500毫秒以内算双击。如果改了鼠标双击速度,直接查看DoubleClickSpeed就能知道阈值了。最慢双击的时间间隔是900毫秒。