click事件形成的條件 – Eric

Eric發表於2019-02-16
事件

滑鼠點選後觸發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，是不會觸發點選事件的。

感覺有幫助別忘了點贊哦！

相關文章