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

最新推荐文章于 2022-02-25 14:33:35 发布

weixin_30851409

最新推荐文章于 2022-02-25 14:33:35 发布

阅读量287

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-lijiahao-/p/5998369.html

版权

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

转载于:https://www.cnblogs.com/-lijiahao-/p/5998369.html

weixin_30851409

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onclikc事件和onmousedown事件的区别与联系

最近在制作拖曳效果时需要用到很多鼠标事件，对其中的一些事件还是非常陌生，就比如说click事件和mousedown事件，他们之间有什么区别又有什么联系，毕竟这两种事件就英文字面意思上来讲还是非常接近的。在stackoverflow中有很多人就这个问题给出这么一种解释：“mousedown captures right / middle clicks too”. 但这种解释并不正确。下面是J...
复制链接

扫一扫