標準參考
根據 W3C HTML4.01 規範中的描述，onFocus 是 HTML 中的標準屬性，它在元素通過鼠標或者鍵盤 TAB 導航獲得焦點時觸發，一般應用在 A、AREA、LABEL、INPUT、SELECT、TEXTAREA、BUTTON 元素上。此事件不冒泡。
根據 W3C DOM Level 2 (HTML) 規範中的描述，HTMLSelectElement、HTMLInputElement、HTMLTextAreaElement、HTMLAnchorElement 這幾個接口（對應 HTML 標籤爲 SELECT、INPUT、TEXTAREA、A）存在 Focus() 方法，此方法可以使當前元素獲得鍵盤焦點。
關於 Focus 的更多資料，請參見 HTML4.01 規範 18.2.3 Intrinsic events、DOM Level 2 (HTML) 規範 1.6.5. Object definitions、DOM Level 2 (Event) 規範 1.6.5. HTML event types 中的內容。
其中 W3C DOM Level 2 (Event) 和 HTML4.01 這兩個規範在 Focus 事件的可觸發元素說明存在不一致。
W3C DOM Level 2 (Event) 規範中說明可以觸發 Focus 事件的元素爲 LABEL, INPUT, SELECT, TEXTAREA, BUTTON 之外，而在 HTML 4.01 規範中還存在 A 和 AREA 元素。
另外，在用戶單擊某元素時，會觸發一系列相關事件發生，他們的執行順序爲 MouseDown、MouseUp、Click，相關說明請參照 DOM-Level-2-Events 規範 1.6.2. Mouse event types 中的 click 部分。
問題描述
在用戶通過鼠標操作觸發 click 事件時，基本的事件觸發流程爲：MouseDown 事件 --> MouseUp 事件 --> Click 事件。
如果用戶點擊的元素可以獲得焦點，並且當前還沒有獲得焦點時，會在 MouseUp 事件前先觸發 Focus 事件，再依次觸發其後事件。
此時就會出現問題，如果被點擊的元素無法通過點擊操作獲得焦點，則 Focus 事件不會被觸發，他的事件函數也不會因點擊操作而運行，這就有可能導致功作者設計的功能無法按預期效果執行。
造成的影響
當頁面開發者將關鍵事件處理程序放置到 Focus 事件中，並期望使用鼠標單擊操作觸發 Focus 事件內處理函數時，可能會導致無法觸發相應事件。
受影響的瀏覽器
| 所有瀏覽器 |
|---|
問題分析
根據相關事件規範說明，一般情況下可以觸發 Focus 事件的元素爲 A, AREA, LABEL, INPUT, SELECT, TEXTAREA, BUTTON，它們均可使用設備指針（鼠標）和 TAB 鍵切換到相應的元素標籤上，並觸發焦點事件。
實際上各個瀏覽器對使用設備指針觸發的 Focus 事件處理情況不一，我們將常用 HTML 標籤依次綁定 click 和 Focus 事件監聽處理函數，依次點擊各個標籤元素，在右側的事件信息框中觀察執行情況。
由於相關的測試代碼較多，故不在頁面上展示，具體代碼請參見頁面底部測試頁面部分。
彙總測試程序數據，可得出各瀏覽器運行結果表，如下：
| click 標記是否可以獲得焦點 | IE6 IE7 IE8 | Firefox | Chrome Safari | Opera |
|---|---|---|---|---|
| A | 可 | 可 | 否 | 可 |
| AREA | 可 | 可 | 否 | 可 |
| LABEL | 否 | 否 | 否 | 否 |
| INPUT[type=text] INPUT[type=password] |
可 | 可 | 可 | 可 |
| SELECT TEXTAREA | 可 | 可 | 可 | 可 |
| BUTTON INPUT[type=radio] INPUT[type=checkbox] INPUT[type=button] INPUT[type=submit] |
可 | 可 | 否 | 可 |
| EMBED | 可 | 可 | 否 | 否 |
| IFRAME | 可 | 否 | 否 | 否 |
| TABLE CAPTION TD | 可 | 否 | 否 | 否 |
| FIELDSET | 可 | 否 | 否 | 否 |
| 其他 HTML 元素 1 | 否 | 否 | 否 | 否 |
注 1：這些 HTML 元素包括： TD DIV SPAN CODE LEGEND TBODY TFOOT THEAD ABBR ACRONYM ADDRESS B BDO BIG BLOCKQUOTE CENTER CITE DD DEL DIR DFN DL DT EM FONT FORM H1 H2 H3 H4 H5 H6 I INS INS KBD LI MENU OL OBJECT P PRE Q S SAMP SMALL STRIKE STRONG SUB SUP TH TR TT U UL VAR。
可以看到各瀏覽器對於 A AREA BUTTON INPUT SELECT TEXTAREA EMBED IFRAME TABLE CAPTION TD FIELDSET 這幾個元素，通過設備指針（鼠標）的點擊操作時觸發 Focus 事件的情況，在實現中存在差異。
解決方案
- 只在 INPUT[type=text]INPUT[type=password] SELECT TEXTAREA 元素中，使用 Focus 事件替代 click 事件觸發相關業務邏輯處理程序。
- 其他標記中的 Focus 事件無法使用鼠標指針的 click 操作觸發，僅能通過 TAB 鍵切到可觸發 Focus 事件的元素中才會生效。
參見
知識庫
相關問題
測試環境
| 操作系統版本: | Windows 7 Ultimate build 7600 |
|---|---|
| 瀏覽器版本: | IE6 IE7 IE8 Firefox 3.6.8 Chrome 7.0.517.0 dev Safari 5.0.1 Opera 10.61 |
| 測試頁面: | click_and_Focus.html |
| 本文更新時間: | 2010-09-03 |
關鍵字
A AREA BUTTON INPUT SELECT TEXTAREA EMBED IFRAME TABLE CAPTION TD FIELDSET CLICK Focus 鼠標 點擊 焦點