鼠標點擊後觸發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，是不會觸發點擊事件的。
感覺有幫助別忘了點贊哦！