表單 Radio Button 點選,在不同瀏覽器所觸發的事件與順序

此篇文章最近更新時間為2011-01-23 16:41:04 目前共有2篇留言

關於作者 - JosephJ

任職於 Faria。喜好戶外運動、2008 年 5 月完成「跑步環島」。對於新技術跟程式碼有著強烈的偏執狂。

前陣子聽同事提到:「表單 radio button 的 focus、blur 與 change 事件在某些情況不會被觸發」,另外我想要做個表單驗證的工具,最好的情況是 blur 或 change 時能做檢查,就花了時間仔細觀察了 Radio 會觸發的事件。我在 6 個 radio button 上個別綁了以下事件:

  • focus
  • change
  • click
  • blur

點選後,四個事件的觸發順序如下,括號代表在點選前有已經被選取的 Radio Button 選項:

Internet Explorer

滑鼠
  1. (前一個選項 change)
  2. (前一個選項 blur)
  3. 被點選的選項 focus
  4. 被點選的選項 click
鍵盤
  1. (前一個選項 change)
  2. 被點選的選項 click
  3. (前一個選項 blur)
  4. 被點選的選項 focus

滑鼠跟鍵盤事件的觸發順序不一樣,真是奇怪。change 事件不會出現在被點選的新選項

Firefox 與 Opera

滑鼠
  1. (前一個選項 blur)
  2. 目前選項 focus
  3. 目前選項 click
  4. 目前選項 change
鍵盤
  1. (前一個選項 blur)
  2. 目前選項 focus
  3. 目前選項 click
  4. 目前選項 change

Firefox 的滑鼠跟鍵盤觸發的順序是一致的,跟 IE 不同的地方在於 change 事件只存在於被點選的新選項、而非先前的舊選項。IE 與 Firefox/Safari 不一致了,真是頭大...

Chrome 與 Safari

滑鼠
  1. 目前選項 change
  2. 目前選項 click
鍵盤
  1. (前一個選項 blur)
  2. 目前選項 focus
  3. 目前選項 click

change 事件的時機則跟 IE 相同。但... 麻煩的是,Chrome/Safari 的 focus 與 blur 只在用鍵盤的時候會被觸發,這樣 blur 就不太能被利用在表單驗證中了 :(

結語

本來想要利用 change 或 blur 做即時的表單驗證工具,但是目前這樣看下來,就被 IE 與 Chrome 的實作給擋掉了,只能另外尋找解法來做囉 :(



Comments

  1. 水中月明 2014-08-22 11:58:29
    非常感谢博主的实验。然后关于实时表单验证,能否使用keypress事件,这样不是比失去焦点的时候去验证,更加实时吗?
  2. 2013-04-18 23:47:13
暱稱: 必填。
Email: 非必填。若填寫為不公開欄位,僅供站長參考聯繫。
內容: 必填。限 255 個字元以內。
驗證碼:
送出

Facebook Comment