資訊專欄INFORMATION COLUMN
摘要：鼠標點擊后觸發事件的必要條件場景頁面上有很多輸入框發貨單號，鼠標離開文本框會向后臺發送請求保存發貨單號，請求時頁面會出現遮罩。右擊不會觸發事件。總結事件的觸發條件在元素上按下鼠標左鍵，在元素上抬起鼠標左鍵。
鼠標點擊后觸發click事件的必要條件 - Eric
場景
1、頁面上有很多輸入框（發貨單號），鼠標離開文本框會向后臺發送請求保存發貨單號，請求時頁面會出現loading遮罩。
2、頁面上有一個【發貨】按鈕，點擊發貨按鈕會向后臺獲取需要發貨的數據（包含發貨單號）
問題
在輸入框中填寫完發貨單號，直接點擊發貨按鈕時，有時候無法觸發發貨事件(click事件)，有時候可以，why？
探索
要想知道真正的原因，我們要先說一下兩個事件的先后順序，我們知道當點擊頁面其他地方時才會觸發 失焦事件(即onmousedown事件)，所以我們點擊發貨按鈕時一定觸發了失焦事件，那為什么有時候無法觸發發貨（click）事件呢，接下來一下來實驗。
測試需要的代碼
自己可以根據代碼實驗一下。
實驗結果
1、鼠標按下后不會立即觸發click事件，需要鼠標抬起。
2、右擊不會觸發click事件。
3、鼠標抬起時如果不在按下時的元素上，不會觸發click事件。
總結
click事件的觸發條件： 在A元素上按下鼠標左鍵，在A元素上抬起鼠標左鍵。
解密
現在小伙伴們應該知道為什么有時候不會觸發click事件了吧，如果在loading遮罩出現前，我們已經松開鼠標（觸發click事件），是可以觸發【發貨】事件的，如果在loading出現后鼠標才松開，那么相當于我們的實驗結果3，是不會觸發點擊事件的。
感覺有幫助別忘了點贊哦！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100947.html
摘要：鼠標點擊后觸發事件的必要條件場景頁面上有很多輸入框發貨單號，鼠標離開文本框會向后臺發送請求保存發貨單號，請求時頁面會出現遮罩。右擊不會觸發事件。總結事件的觸發條件在元素上按下鼠標左鍵，在元素上抬起鼠標左鍵。 鼠標點擊后觸發click事件的必要條件 - Eric 場景 1、頁面上有很多輸入框（發貨單號），鼠標離開文本框會向后臺發送請求保存發貨單號，請求時頁面會出現loading遮罩。2...
摘要：實時在文本框顯示內容引入這個函數綁定定時器自動執行在類中定義一個定時器并在構造函數中設置啟動及其信號和槽設置計時間隔并啟動計時結束調用方法注意不要加引入這個參考 qt designer使用 開始 新建項目(eric6 項目) 新建窗體(eric6 窗體) 編輯界面(轉到qt designer) 保存 編譯窗體(轉到eric6 窗體) 運行(查看頁面效果) 頁面縮放效果(qt d...
摘要：如果編輯了按鈕那么接下來就是通過按鈕觸發某個動作首先右擊窗體生成對話框代碼綁定按鈕接著在代碼欄就會看到生成的文件在中創建綁定再次編譯打開文件發現已經綁定服務日志運行中播放暫停退出實時日志服務器開始服務密碼退出狀態信息類 如果編輯了按鈕, 那么接下來就是通過按鈕觸發某個動作 首先右擊窗體,生成對話框代碼 showImg(https://segmentfault.com/img/bVbem...
這只是個開頭 說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發手勢庫 - (2)tsconfig.json & r...
摘要：使用生成及下載瀏覽器端的文件前言之前寫了一篇文章一次下載多個文件的解決方案中寫了如何下載服務器端的文件支持連續下載多個，今天和大家分享下如何在瀏覽器端生成文件并下載。 使用js生成及下載瀏覽器端的文件-Eric 前言 之前寫了一篇文章一次下載多個文件的解決方案中寫了如何下載服務器端的文件（支持連續下載多個），今天和大家分享下如何在瀏覽器端生成文件并下載。 場景 如果線上經常出現一些...
閱讀 1376·2021-11-15 18:11
閱讀 2508·2021-08-19 10:56
閱讀 669·2021-08-09 13:42
閱讀 786·2019-08-30 15:53
閱讀 2078·2019-08-30 10:55
閱讀 3137·2019-08-29 17:18
閱讀 1427·2019-08-29 13:45
閱讀 537·2019-08-29 13:15
