click事件形成的條件 - Eric

Terry_Tai 發(fā)布于2019-08-23 14:40 / 1656人閱讀

摘要：鼠標點擊后觸發(fā)事件的必要條件場景頁面上有很多輸入框發(fā)貨單號，鼠標離開文本框會向后臺發(fā)送請求保存發(fā)貨單號，請求時頁面會出現(xiàn)遮罩。右擊不會觸發(fā)事件。總結(jié)事件的觸發(fā)條件在元素上按下鼠標左鍵，在元素上抬起鼠標左鍵。

鼠標點擊后觸發(fā)click事件的必要條件 - Eric

場景

1、頁面上有很多輸入框（發(fā)貨單號），鼠標離開文本框會向后臺發(fā)送請求保存發(fā)貨單號，請求時頁面會出現(xiàn)loading遮罩。
2、頁面上有一個【發(fā)貨】按鈕，點擊發(fā)貨按鈕會向后臺獲取需要發(fā)貨的數(shù)據(jù)（包含發(fā)貨單號）

問題

在輸入框中填寫完發(fā)貨單號，直接點擊發(fā)貨按鈕時，有時候無法觸發(fā)發(fā)貨事件(click事件)，有時候可以，why？

探索

要想知道真正的原因，我們要先說一下兩個事件的先后順序，我們知道當點擊頁面其他地方時才會觸發(fā) 失焦事件(即onmousedown事件)，所以我們點擊發(fā)貨按鈕時一定觸發(fā)了失焦事件，那為什么有時候無法觸發(fā)發(fā)貨（click）事件呢，接下來一下來實驗。

測試需要的代碼

自己可以根據(jù)代碼實驗一下。

實驗結(jié)果

1、鼠標按下后不會立即觸發(fā)click事件，需要鼠標抬起。
2、右擊不會觸發(fā)click事件。
3、鼠標抬起時如果不在按下時的元素上，不會觸發(fā)click事件。

總結(jié)
click事件的觸發(fā)條件：在A元素上按下鼠標左鍵，在A元素上抬起鼠標左鍵。

解密
現(xiàn)在小伙伴們應該知道為什么有時候不會觸發(fā)click事件了吧，如果在loading遮罩出現(xiàn)前，我們已經(jīng)松開鼠標（觸發(fā)click事件），是可以觸發(fā)【發(fā)貨】事件的，如果在loading出現(xiàn)后鼠標才松開，那么相當于我們的實驗結(jié)果3，是不會觸發(fā)點擊事件的。

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

GPU云服務器云服務器 js觸發(fā)click事件死鎖的形成 webrtc的波束形成 webrtc中的語音波束形成

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100947.html

click事件形成的條件 - Eric

摘要：鼠標點擊后觸發(fā)事件的必要條件場景頁面上有很多輸入框發(fā)貨單號，鼠標離開文本框會向后臺發(fā)送請求保存發(fā)貨單號，請求時頁面會出現(xiàn)遮罩。右擊不會觸發(fā)事件。總結(jié)事件的觸發(fā)條件在元素上按下鼠標左鍵，在元素上抬起鼠標左鍵。鼠標點擊后觸發(fā)click事件的必要條件 - Eric 場景 1、頁面上有很多輸入框（發(fā)貨單號），鼠標離開文本框會向后臺發(fā)送請求保存發(fā)貨單號，請求時頁面會出現(xiàn)loading遮罩。2...

My_Oh_My 2019-08-02 14:05 評論0 收藏0
PyQt5+eric6之旅(二) - qt designer基本操作

摘要：實時在文本框顯示內(nèi)容引入這個函數(shù)綁定定時器自動執(zhí)行在類中定義一個定時器并在構(gòu)造函數(shù)中設置啟動及其信號和槽設置計時間隔并啟動計時結(jié)束調(diào)用方法注意不要加引入這個參考 qt designer使用開始新建項目(eric6 項目) 新建窗體(eric6 窗體) 編輯界面(轉(zhuǎn)到qt designer) 保存編譯窗體(轉(zhuǎn)到eric6 窗體) 運行(查看頁面效果) 頁面縮放效果(qt d...

2bdenny 2019-07-30 17:11 評論0 收藏0
PyQt5+eric6之旅(四) - 信號與槽的綁定

摘要：如果編輯了按鈕那么接下來就是通過按鈕觸發(fā)某個動作首先右擊窗體生成對話框代碼綁定按鈕接著在代碼欄就會看到生成的文件在中創(chuàng)建綁定再次編譯打開文件發(fā)現(xiàn)已經(jīng)綁定服務日志運行中播放暫停退出實時日志服務器開始服務密碼退出狀態(tài)信息類如果編輯了按鈕, 那么接下來就是通過按鈕觸發(fā)某個動作首先右擊窗體,生成對話框代碼 showImg(https://segmentfault.com/img/bVbem...

Eidesen 2019-07-30 17:13 評論0 收藏0
用typescript開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?

這只是個開頭說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發(fā)一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 評論0 收藏0
js生成及下載瀏覽器端的文件-Eric

摘要：使用生成及下載瀏覽器端的文件前言之前寫了一篇文章一次下載多個文件的解決方案中寫了如何下載服務器端的文件支持連續(xù)下載多個，今天和大家分享下如何在瀏覽器端生成文件并下載。使用js生成及下載瀏覽器端的文件-Eric 前言之前寫了一篇文章一次下載多個文件的解決方案中寫了如何下載服務器端的文件（支持連續(xù)下載多個），今天和大家分享下如何在瀏覽器端生成文件并下載。場景如果線上經(jīng)常出現(xiàn)一些...

dreamans 2019-08-23 14:36 評論0 收藏0