click事件造成的條件 - Eric

時間 2019-12-12

標籤 click 事件造成條件 eric 简体版

原文原文鏈接

鼠標點擊後觸發click事件的必要條件 - Eric

場景html

一、頁面上有不少輸入框（發貨單號），鼠標離開文本框會向後臺發送請求保存發貨單號，請求時頁面會出現loading遮罩。
二、頁面上有一個【發貨】按鈕，點擊發貨按鈕會向後臺獲取須要發貨的數據（包含發貨單號）測試

問題code

在輸入框中填寫完發貨單號，直接點擊發貨按鈕時，有時候沒法觸發發貨事件(click事件)，有時候能夠，why？htm

探索事件

要想知道真正的緣由，咱們要先說一下兩個事件的前後順序，咱們知道當點擊頁面其餘地方時纔會觸發 失焦事件(即onmousedown事件)，因此咱們點擊發貨按鈕時必定觸發了失焦事件，那爲何有時候沒法觸發發貨（click）事件呢，接下來一下來實驗。ip

測試須要的代碼it

<!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>

本身能夠根據代碼實驗一下。io

實驗結果console

一、鼠標按下後不會當即觸發click事件，須要鼠標擡起。
二、右擊不會觸發click事件。
三、鼠標擡起時若是不在按下時的元素上，不會觸發click事件。後臺

總結
click事件的觸發條件：在A元素上按下鼠標左鍵，在A元素上擡起鼠標左鍵。

解密
如今小夥伴們應該知道爲何有時候不會觸發click事件了吧，若是在loading遮罩出現前，咱們已經鬆開鼠標（觸發click事件），是能夠觸發【發貨】事件的，若是在loading出現後鼠標才鬆開，那麼至關於咱們的實驗結果3，是不會觸發點擊事件的。

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