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