最近在制作拖曳效果时需要用到很多鼠标事件,对其中的一些事件还是非常陌生,就比如说click事件和mousedown事件,他们之间有什么区别又有什么联系,毕竟这两种事件就英文字面意思上来讲还是非常接近的。
在stackoverflow中有很多人就这个问题给出这么一种解释:“mousedown captures right / middle clicks too”. 但这种解释并不正确。
下面是JavaScript.info提供的一张图片:
从所给资料来看onmousedown是通过鼠标按下去的瞬间来触发一个事件而onclick是在点击完成之后才会被进行触发(onlick事件在onmousedown和onmouseup之后触发)。
下面通过两段简单的代码来验证:
1.mousedown事件
(点击此输入框,鼠标左键按下的一瞬间出现坐标)
实现代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <input onmousemove="this.value = event.clientX+':'+event.clientY">
9 </body>
10 </html>
2.click事件
(点击此输入框,鼠标左键按下并弹起才会出现坐标)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input onclick="this.value = event.clientX+':'+event.clientY">
</body>
</html>
3.mouseup事件
(点击此输入框,鼠标左键松开后才会出现坐标,但是由于mouseup事件结束后就会触发click事件,间隔时间很短不大好通过肉眼识别)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input onmouseup="this.value = event.clientX+':'+event.clientY">
</body>
</html>
这就是onclick和onmousedown的不同。至于stackoverflow中一些人给的答案又如何解释?
实际上,无论是鼠标左键单击还是鼠标右键单击还是用鼠标中间的滚轮单击 都包括这么一个顺序 (mousedown + mouseup + 特定事件)。
在这里,鼠标左键的特定事件是click事件,而鼠标中间滚轮的特定事件和左键单击效果一样,鼠标右击的单击事件是contextmenu。但是他们都紧接着mousedown事件之后触发的,所以就会带来这样一种感觉“mousedown captures right / middle clicks too”。