業(yè)務上實現(xiàn)了一個選中組件,然后拖拽移動組件游桩,在做的過程中發(fā)現(xiàn)組件移動的過程中時不時會選中頁面中的文本元素牲迫。
在尋找根源之前,先看一下一個網(wǎng)頁中W3C規(guī)定了哪些需要開發(fā)者介入處理的借卧。
Tab鍵序列
tabindex 指示其元素是否可以聚焦盹憎,以及它是否/在何處參與順序鍵盤導航。
tabindex=負值 (通常是tabindex=“-1”)铐刘,表示元素是可聚焦的陪每,但是不能通過鍵盤導航來訪問到該元素,用JS做頁面小組件內(nèi)部鍵盤導航的時候非常有用镰吵。
tabindex="0" 檩禾,表示元素是可聚焦的,并且可以通過鍵盤導航來聚焦到該元素疤祭,它的相對順序是當前處于的DOM結構來決定的盼产。
tabindex=正值,表示元素是可聚焦的勺馆,并且可以通過鍵盤導航來訪問到該元素戏售;它的相對順序按照tabindex 的數(shù)值遞增而滯后獲焦。如果多個元素擁有相同的 tabindex谓传,它們的相對順序按照他們在當前DOM中的先后順序決定蜈项。
CSS use-select
不是繼承屬性,即便默認的屬性值auto的表現(xiàn)基本上以繼承為主续挟,似乎是繼承屬性紧卒。
該屬性是配置用戶能否選中文本。
可選值為:auto | text | none | contain | all
Selection
表示用戶選擇的文本范圍或插入符號的當前位置诗祸。它代表頁面中的文本選區(qū)跑芳,可能橫跨多個元素轴总。文本選區(qū)由用戶拖拽鼠標經(jīng)過文字而產(chǎn)生。要獲取用于檢查或修改的 Selection 對象博个,通過window.getSelection() 獲取
Event
- onselect 選擇事件
- onselectstart 開始選擇事件
- onselectionchange 選擇內(nèi)容變化事件