博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
click事件形成的条件 - Eric
阅读量:6324 次
发布时间:2019-06-22

本文共 669 字,大约阅读时间需要 2 分钟。

鼠标点击后触发click事件的必要条件 - Eric


场景

1、页面上有很多输入框(发货单号),鼠标离开文本框会向后台发送请求保存发货单号,请求时页面会出现loading遮罩。

2、页面上有一个【发货】按钮,点击发货按钮会向后台获取需要发货的数据(包含发货单号

问题

在输入框中填写完发货单号,直接点击发货按钮时,有时候无法触发发货事件(click事件),有时候可以,why?


探索

要想知道真正的原因,我们要先说一下两个事件的先后顺序,我们知道当点击页面其他地方时才会触发 失焦事件(即onmousedown事件),所以我们点击发货按钮时一定触发了失焦事件,那为什么有时候无法触发发货(click)事件呢,接下来一下来实验。

测试需要的代码

                            

自己可以根据代码实验一下。


实验结果

1、鼠标按下后不会立即触发click事件,需要鼠标抬起。

2、右击不会触发click事件。
3、鼠标抬起时如果不在按下时的元素上,不会触发click事件。

总结

click事件的触发条件: 在A元素上按下鼠标左键,在A元素上抬起鼠标左键。


解密

现在小伙伴们应该知道为什么有时候不会触发click事件了吧,如果在loading遮罩出现前,我们已经松开鼠标(触发click事件),是可以触发【发货】事件的,如果在loading出现后鼠标才松开,那么相当于我们的实验结果3,是不会触发点击事件的。

感觉有帮助别忘了点赞哦!

转载地址:http://epmaa.baihongyu.com/

你可能感兴趣的文章
android判断网络连接状态的三种方法
查看>>
ZOJ Monthly, March 2013 解题报告
查看>>
LaTex表格 Itemize&&enumerate
查看>>
Spring Boot中@OneToMany与@ManyToOne几个需要注意的问题
查看>>
文件传输协议之FTP
查看>>
Openstack 安装部署指南翻译系列 之 Glance服务安装(Image)
查看>>
Java 使用POI实现execl的导入导出数据实践
查看>>
Unity3D游戏开发之伤害数值显示
查看>>
如何在Linux上搭建一个基于Web的轻型监控系统
查看>>
linux基础命令使用
查看>>
zabbix简单检测
查看>>
other模块的网络请求业务封装工具类
查看>>
Windows进程崩溃问题定位方法
查看>>
程序员如何让自己 Be Cloud Native - 配置篇
查看>>
SQL Server各个版本之间的差异
查看>>
如何拆笔记本键盘(组图)
查看>>
lua install
查看>>
海量数据处理 算法总结
查看>>
mysql性能参数查询
查看>>
VirtualBox运行报错Unable to load R3 module
查看>>