saber酱的抱枕

哀哉京阿尼

12/18
11:24
学习

js自定义鼠标双击事件以及对其的一些思考

昨天在做图的痛苦煎熬中,忽然脑子一抽想到了鼠标双击事件(看啊,我不得不思考代码以减轻做图的痛苦了。可见做图是多么惨无人道的事情)。于是鼓捣了两个玩意出来。

第一个代码是自定义鼠标双击事件。我们知道,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毫秒。

js自定义鼠标双击事件以及对其的一些思考