mousedown、mouseup、click事件之间的关系及执行顺序

三个事件的触发时机

mousedown

当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseup

当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

click

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click 事件。
注意：触发click事件的条件是按下并松开鼠标左键！，按下并松开鼠标右键并不会触发click事件。

三个事件的触发顺序

若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件
若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件

mousedown、mouseup、click事件之间的关系及执行顺序相关推荐

mousedown mouseup click 触发顺序
mousedown.mouseup.click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况下后面两个事件也肯定会被激活 mousemove 事件在是一直在元素上运行的(如果 ...
鼠标三种触发事件mousedown、mouseup、click关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件. 与 click 事件不同,mousedown 事件仅需要按键被按 ...
EventSystem的事件触发和pointer类执行顺序
上一篇写了Event Trigger的触发事件方法.这篇写EventSystem的触发事件方法.这两个方法都可以用来触发3D和2D事件.而且场景中都必须存在EventSystem这个GameObjec ...
事件冒泡和捕获的执行顺序
w3c规定了,任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段.绑定在被点击元素的事件是按照代码的顺序发生的. 冒泡,它就像鱼儿吐泡泡一样,从下到上. 从祖先元素开 ...
addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序
JavaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 jav ...
mousedown mousemove mouseup 与 click事件冲突的解决办法
使用css样式pointer-events解决需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup ...
Vue input的blur事件影响下拉框中点击事件的解决方案用mousedown/mousedown替代click
最近遇到一个需求,输入框输入关键词,要出一个带输入建议的弹框,类似于ElementUI自带的<el-autocomplete>,只是需求中的弹框底部有个分页功能,因此用不了自带的<e ...
js区分click事件和mousedown、单击和双击事件
一.点击和拖动 1.问题对于同一个对象进行的操作涉及点击(click)和拖动(mousedown,mousemove,mouseup),而拖动中又会触发一次点击事件 2.解决:设置全局变量判断点击之 ...