onclikc事件和onmousedown事件的区别与联系

最近在制作拖曳效果时需要用到很多鼠标事件,对其中的一些事件还是非常陌生,就比如说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”。

 

posted @ 2016-10-25 21:39  不穿内裤的男孩  阅读(1530)  评论(0编辑  收藏  举报