业务上实现了一个选中组件,然后拖拽移动组件,在做的过程中发现组件移动的过程中时不时会选中页面中的文本元素。
在寻找根源之前,先看一下一个网页中W3C规定了哪些需要开发者介入处理的。
Tab键序列
tabindex 指示其元素是否可以聚焦,以及它是否/在何处参与顺序键盘导航。
tabindex=负值 (通常是tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用JS做页面小组件内部键盘导航的时候非常有用。
tabindex="0" ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的DOM结构来决定的。
tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前DOM中的先后顺序决定。
CSS use-select
不是继承属性,即便默认的属性值auto的表现基本上以继承为主,似乎是继承属性。
该属性是配置用户能否选中文本。
可选值为:auto | text | none | contain | all
Selection
表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的 Selection 对象,通过window.getSelection() 获取
Event
- onselect 选择事件
- onselectstart 开始选择事件
- onselectionchange 选择内容变化事件