測試同學提了乙個問題, 問題的具體現象為
乙個dialog出現後, 其中的我感覺也很是奇怪, 但是只要用滑鼠點選input內容有聚焦, 但是確不能通過tab移動到下乙個input輸入框
dialog浮層的任何乙個位置就可以進行正常的操作了(通過tab進行input的移動)
奇怪的是, 我如果不用滑鼠點選的情況下, 只輸入文字是可以改變input的內容的.
現象描述完畢, 我開始了自己的分析. 背景: 這個元件是另乙個同學開發的, 並且已經是 n 手元件了.
1. 確認是否為聚焦元素
通過document.activeelement是可以獲取的. 但是我只要列印的時候, 那可能就會影響 activeelement
所以, 我設定了乙個 interval 進行列印
通過事先在控制台輸入
setinterval(()=>, 500)document.addeventlistener('keydown', function(e))input, 所以我需要繼續研究這個奇怪
2. keyboard 時間是否被其他捕獲了呢?
通過我細緻觀察, 發現我滑鼠點選的時候, dialog 後邊浮層的**會有變化, 細緻觀察是類似乙個blur的效果.
經過跟蹤, 發現這個只是乙個效果, 的確觸發了這個類似blur的事件 handler
那怎麼獲取乙個元素有哪些事件呢?
萬能的internet告訴了我們, 通過目前多數瀏覽器支援的方法geteventlisteners其他的還有event-debug的外掛程式
window.geteventlisteners('document')eventlistener breakpoints
方便的設定自己的除錯.
結果經過跟蹤也是發現keyboard事件被攔截了, 所以tab鍵盤事件不正常. 但是我點選之後, 觸發了類似失焦的乙個事件,
釋放了對keyboard事件的捕獲.
跟蹤到結果, 自然針對我這個專案可以去跟蹤釋放的方法了, 這個就是我專案內部的事情了....
總結與反思
很多事情, 遇到了的確感覺很奇怪, 但還是那句話there is no magic, 程式的世界沒有魔法
思路和思想是最重要的, 指引你去分析問題. 而基本的思路與牢固的基礎是密不可分的.
通過分析, 跟蹤, 問題還是很容易追蹤到的.
感嘆: 目前的前端開發複雜了許多, 但也大大便利了好多, chrome 的除錯工具不要太方便呀~
由乙個矩陣得到乙個掩模矩陣
1.假設有乙個不完整的資料，如下 2030251 51830 317810 0232930112 1815 0import pandas as pd import numpy as np read data data pd.read csv data.csv a np.isnan data get ...
愛由乙個微笑開始
愛由乙個微笑開始，用乙個吻來成長，用一滴淚去結束 當你愛上乙個人而不被對方所愛，是一件很傷害的事。但最痛苦的莫過你愛乙個人而卻沒有勇氣讓他知道你的感受。最好的朋友是那一種能夠讓你坐在鞦韆上，不發一言，然後靜靜地一起離開，感覺就是從未有過最好的對話。這是真實的 你永不知道你得到了什麼直至你失去了的時候...
由乙個網域名稱想到的
花了 大價錢 買了乙個網域名稱 zzm.hk，夠短了，其實沒有什麼含義，但沒有其它選擇。這樣的網域名稱，好像只能指向個人部落格站點，或者用qq郵箱體系裡的網域名稱郵箱功能設定乙個如 i zzm.hk 記得給我發郵件 的個人email。記得 phpdragon 以前還註冊過乙個 phpdragon.c...