<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    http://www.tkk7.com/ebecket 返還網
    隨筆-140  評論-11  文章-131  trackbacks-0

    這個問題我大概在一年多以前在某個用到VML的頁面中(當時倒是記錄了VML的一個嚴重問題)首次發現了這個Bug。經過一番狗狗之后,也未發現有同樣的報告。后來我又逐漸在幾種其他非VML的情形下重現了這個奇異的Bug。經過一番探究,我大致推斷出了這個bug的原因。不過我一直沒有公開發布過這個有趣的問題,只是跟少數同事提到過它。這個bug有個有趣的特點,就是西方人通常不會碰到這個bug。

    最近,真懶同學(realazy)在《認識延遲時間為 0 的 setTimeout》一文中舉例說明setTimeout的用途。代碼大意如下:

    Javascript代碼 復制代碼
    1. $('myButton').onmousedown = function () {   
    2.   var input = document.createElement('input');   
    3.   input.type = 'text';   
    4.   $('myDiv').appendChild(input);   
    5.   input.focus();   
    6. }  


    在IE中,新創建的input沒有如預期的獲得焦點。

    如果把input.focus()放在一個setTimeout中延時執行,則就可以獲得焦點。

    這個例子本身其實并不能證明realazy想要說明的觀點,因為他不小心碰到了一個IE的微妙bug。在留言中,Lunatic Sun倒是敏銳的判斷出這是IE的bug,只是這個bug的本質不是那么容易認識到,它其實并不是onmousedown本身的bug。

    實際上,這是IE的focus機制的bug。

    IE中的所有元素其實并不是被憑空繪制出來的,而是統統基于已有的Windows控件之上。除了典型的按鈕、下拉菜單等,普通的div其實也是一個textbox控件。

    所以IE的HTML focus等實際是被轉換為windows控件的focus,于是在IE中存在兩種不同層次的focus機制。理想上,HTML的focus應該被同步轉換為windows控件的focus,然而IE可憐的代碼導致這種轉換存在許多bug。我們經常遇到的焦點虛線框丟失的問題其實就是一個例子。

    實際上,在上面的例子中,表面上input沒有得到焦點,但是其實調用focus()之后,HTML focus確實已經到了新生成的input中,這一點你可以通過document.activeElement來驗證,你也可以按tab和shift-tab觀察焦點的切換來證明這一點。然而,由于mousedown事件默認會獲得控件焦點,所以windows控件focus就跑回了你的按鈕上面了。這里出現了windows focus機制和html focus機制的脫節。顯然IE在focus上的同步代碼實在是太脆弱了。

    事實上,IE對焦點的控制似乎本來就不和邏輯。所有的hasLayout元素都能獲得焦點!結果一個頁面上大部分區域在mousedown之后焦點就不知跑到哪個元素上了——這顯然不是我們想要的行為——合乎HTML規范邏輯的行為應該是只有交互控件,如表單控件和A元素等,才能獲得焦點。這導致一個典型的用戶體驗問題:在一個限制高度的可卷動區域中(例如一個長表單),拖動scrollbar,控件焦點就丟失——實際焦點跑到scrollbar所在的元素(例如form元素)上了。最嚴重的是,body元素一般總會有scrollbar!為了緩解這個問題,微軟為body元素打了補丁,使得body上的scrollbar不會搶走焦點。然而IE這個patch打得實在是太爛了,在標準模式下,canvas從body變成了html元素,所以頁面scrollbar就到了html元素上,結果bug又回來了!

    撇開搶焦點問題,我們回到前面的話題。

    既然html focus還是在input元素上,那么當時windows控件焦點到底跑哪里去了?實際上這個焦點跑到了mousedown所發生的對象上。比如如果是一個input按鈕,焦點就會在該input按鈕實際對應的windows的Button控件上。不過button元素的實現和一般的input不同,所以button元素上的mousedown之后,windows控件焦點實際上會跑到button元素外層的那個元素所對應的windows控件(通常是TextBox控件)中。

    如何證明這一點?我過去用過一個調試工具可以顯示出每個html控件實際的windows控件,也能查看實際的windows系統焦點。不過現在想不起來那個工具的名稱了。搞笑的是,此處還會出現一個非常orz的癥狀——也就是本文標題所稱的“西方人通常發現不了的一個IE的bug”——可以證明這一點。

    focus問題 + 西方人通常發現不了。各位是否已經猜到了呢?大家不妨用realazy的那個頁面中的第一個按鈕來直接實驗一把。

    我會在下篇blog中繼續聊這個話題

    posted on 2009-10-12 16:21 becket_zheng 閱讀(342) 評論(0)  編輯  收藏

    只有注冊用戶登錄后才能發表評論。


    網站導航:
     
    主站蜘蛛池模板: 亚洲午夜免费视频| 又大又硬又粗又黄的视频免费看 | 三级片免费观看久久| 青青草国产免费久久久下载| 亚洲精品中文字幕无乱码麻豆| 亚洲一级毛片免费观看| 亚洲日产2021三区| 色窝窝免费一区二区三区| 亚洲国产精品综合福利专区| 青青视频观看免费99| 亚洲精品无播放器在线播放| 国产做床爱无遮挡免费视频| 一级毛片一级毛片免费毛片| 国产AV无码专区亚洲AWWW| 午夜网站在线观看免费完整高清观看 | 亚洲午夜免费视频| 97免费人妻无码视频| 亚洲色大情网站www| 亚洲精品网站在线观看不卡无广告 | 噼里啪啦免费观看高清动漫4| 最新亚洲精品国偷自产在线| 日本高清免费不卡在线| 男女啪啪免费体验区| 国产V亚洲V天堂A无码| 国产大片91精品免费观看不卡| 国产人成亚洲第一网站在线播放| 国产精品免费视频播放器| 一级毛片免费在线观看网站| 久久久无码精品亚洲日韩蜜桃| 亚洲w码欧洲s码免费| 色天使亚洲综合一区二区| 亚洲午夜久久久久久久久久| 69视频在线观看免费| 亚洲AV无码成人精品区狼人影院| 久久久久亚洲AV无码专区网站| 美女内射无套日韩免费播放| 亚洲AV无码一区二区三区久久精品 | 亚洲国产成人久久精品动漫| 成人免费无码视频在线网站| 中文字幕手机在线免费看电影| 亚洲日本视频在线观看|