鼠标点击后触发click事件的必要条件 - Eric
场景
1、页面上有很多输入框(发货单号),鼠标离开文本框会向后台发送请求保存发货单号,请求时页面会出现loading遮罩。
2、页面上有一个【发货】按钮,点击发货按钮会向后台获取需要发货的数据(包含发货单号)问题
在输入框中填写完发货单号,直接点击发货按钮时,有时候无法触发发货事件(click事件),有时候可以,why?
探索
要想知道真正的原因,我们要先说一下两个事件的先后顺序,我们知道当点击页面其他地方时才会触发 失焦事件(即onmousedown事件),所以我们点击发货按钮时一定触发了失焦事件,那为什么有时候无法触发发货(click)事件呢,接下来一下来实验。
测试需要的代码
自己可以根据代码实验一下。
实验结果
1、鼠标按下后不会立即触发click事件,需要鼠标抬起。
2、右击不会触发click事件。3、鼠标抬起时如果不在按下时的元素上,不会触发click事件。总结
click事件的触发条件: 在A元素上按下鼠标左键,在A元素上抬起鼠标左键。解密
现在小伙伴们应该知道为什么有时候不会触发click事件了吧,如果在loading遮罩出现前,我们已经松开鼠标(触发click事件),是可以触发【发货】事件的,如果在loading出现后鼠标才松开,那么相当于我们的实验结果3,是不会触发点击事件的。感觉有帮助别忘了点赞哦!