鼠标点击后触发 click 事件的必要条件 – Eric
场景
1、页面上有很多输入框（发货单号），鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现 loading 遮罩。2、页面上有一个【发货】按钮，点击发货按钮会向后台获取需要发货的数据（包含发货单号）
问题
在输入框中填写完发货单号，直接点击发货按钮时，有时候无法触发发货事件 (click 事件)，有时候可以，why？
探索
要想知道真正的原因，我们要先说一下两个事件的先后顺序，我们知道当点击页面其他地方时才会触发 失焦事件 (即 onmousedown 事件)，所以我们点击发货按钮时一定触发了失焦事件，那为什么有时候无法触发发货（click）事件呢，接下来一下来实验。
测试需要的代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<style>
div {
width: 300px;
height: 300px;
border: 1px solid #c33;
}
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3)
}
</style>
</head>
<body>
<div id=”box1″></div>
<div id=”box2″></div>
<div id=”loading”></div>
<script>
// 测试点击事件的过程
box1.onclick = () => {
console.log(1);
}
// 测试右击
box2.onclick = () => {
console.log(‘ 鼠标右击无效 ’)
}
// 显示覆盖
box1.onmousedown = () => {
loading.style.display = ‘block’;
}
loading.onmouseup = () => {
loading.style.display = ‘none’;
}
</script>
</body>
</html>
自己可以根据代码实验一下。
实验结果
1、鼠标按下后不会立即触发 click 事件，需要鼠标抬起。2、右击不会触发 click 事件。3、鼠标抬起时如果不在按下时的元素上，不会触发 click 事件。
总结 click 事件的触发条件：在 A 元素上按下鼠标左键，在 A 元素上抬起鼠标左键。
解密现在小伙伴们应该知道为什么有时候不会触发 click 事件了吧，如果在 loading 遮罩出现前，我们已经松开鼠标（触发 click 事件），是可以触发【发货】事件的，如果在 loading 出现后鼠标才松开，那么相当于我们的实验结果 3，是不会触发点击事件的。
感觉有帮助别忘了点赞哦！