click事件形成的条件 - Eric

Terry_Tai 发布于2019-08-23 14:40 / 1545人阅读

摘要：鼠标点击后触发事件的必要条件场景页面上有很多输入框发货单号，鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现遮罩。右击不会触发事件。总结事件的触发条件在元素上按下鼠标左键，在元素上抬起鼠标左键。

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

场景

1、页面上有很多输入框（发货单号），鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现loading遮罩。
2、页面上有一个【发货】按钮，点击发货按钮会向后台获取需要发货的数据（包含发货单号）

问题

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

探索

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

测试需要的代码

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

实验结果

1、鼠标按下后不会立即触发click事件，需要鼠标抬起。
2、右击不会触发click事件。
3、鼠标抬起时如果不在按下时的元素上，不会触发click事件。

总结
click事件的触发条件：在A元素上按下鼠标左键，在A元素上抬起鼠标左键。

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

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

服务器托管私有云 js触发click事件死锁的形成 webrtc的波束形成 webrtc中的语音波束形成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100947.html

click事件形成的条件 - Eric

摘要：鼠标点击后触发事件的必要条件场景页面上有很多输入框发货单号，鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现遮罩。右击不会触发事件。总结事件的触发条件在元素上按下鼠标左键，在元素上抬起鼠标左键。鼠标点击后触发click事件的必要条件 - Eric 场景 1、页面上有很多输入框（发货单号），鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现loading遮罩。2...

My_Oh_My 2019-08-02 14:05 评论0 收藏0
PyQt5+eric6之旅(二) - qt designer基本操作

摘要：实时在文本框显示内容引入这个函数绑定定时器自动执行在类中定义一个定时器并在构造函数中设置启动及其信号和槽设置计时间隔并启动计时结束调用方法注意不要加引入这个参考 qt designer使用开始新建项目(eric6 项目) 新建窗体(eric6 窗体) 编辑界面(转到qt designer) 保存编译窗体(转到eric6 窗体) 运行(查看页面效果) 页面缩放效果(qt d...

2bdenny 2019-07-30 17:11 评论0 收藏0
PyQt5+eric6之旅(四) - 信号与槽的绑定

摘要：如果编辑了按钮那么接下来就是通过按钮触发某个动作首先右击窗体生成对话框代码绑定按钮接着在代码栏就会看到生成的文件在中创建绑定再次编译打开文件发现已经绑定服务日志运行中播放暂停退出实时日志服务器开始服务密码退出状态信息类如果编辑了按钮, 那么接下来就是通过按钮触发某个动作首先右击窗体,生成对话框代码 showImg(https://segmentfault.com/img/bVbem...

Eidesen 2019-07-30 17:13 评论0 收藏0
用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目录用TypeScript开发手势库 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 评论0 收藏0
js生成及下载浏览器端的文件-Eric

摘要：使用生成及下载浏览器端的文件前言之前写了一篇文章一次下载多个文件的解决方案中写了如何下载服务器端的文件支持连续下载多个，今天和大家分享下如何在浏览器端生成文件并下载。使用js生成及下载浏览器端的文件-Eric 前言之前写了一篇文章一次下载多个文件的解决方案中写了如何下载服务器端的文件（支持连续下载多个），今天和大家分享下如何在浏览器端生成文件并下载。场景如果线上经常出现一些...

dreamans 2019-08-23 14:36 评论0 收藏0