美文网首页
页面元素选中了吗?

页面元素选中了吗?

作者: cendechen | 来源:发表于2021-04-14 15:06 被阅读0次

业务上实现了一个选中组件,然后拖拽移动组件,在做的过程中发现组件移动的过程中时不时会选中页面中的文本元素。

在寻找根源之前,先看一下一个网页中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 选择内容变化事件

相关文章

  • 页面元素选中了吗?

    业务上实现了一个选中组件,然后拖拽移动组件,在做的过程中发现组件移动的过程中时不时会选中页面中的文本元素。 在寻找...

  • CSS3 - 其他选择器

    选中被锚链接指向的元素(:target) 点击 a 标签后,页面显示结果: 选中被鼠标选中的元素(::select...

  • 阻止页面元素被选中

    【问题】侧导航栏点击过快,会导致父导航栏及子导航栏均被选中。 【解决】 css在父元素中添加user-select...

  • 微信小程序调试内部web-view

    微信小程序调试内部web-view 1.进入页面选中元素模式 2.选中web-view页面 3.右键点击web-v...

  • 拖动页面元素时禁止文字被选中

    页面元素被拖动时,内容文字容易被选中,影响用户体验,解决方式如下,添加样式

  • 接口测试(上传文件)

    通过charles抓到请求接口获得以下信息 选中页面上的元素,右键点击->检查,获得如下信息:image.pngi...

  • 前端02day

    元素选择器 语法:标签名{}例如p会选中页面中所有p标签,h1会选中所有h1标签类选择器语法:.className...

  • Appium框架API学习(二)

    一、其他一些定位元素方法 1、scroll()该方法是滚动页面,就是选中一个元素滚动到另一个元素,以QQ为例: 2...

  • 右键菜单插件-contextmenu

    右键菜单插件可以绑定页面中的任意元素,绑定后,选中元素,点击右键,便通过该插件弹出一个快捷菜单,点击菜单各项名称执...

  • jQuery选择器及常用api的用法示例

    .eq(index):选中同级同类元素中对应下标的元素 .next() / .prev():选中同级中紧邻元素的下...

网友评论

      本文标题:页面元素选中了吗?

      本文链接:https://www.haomeiwen.com/subject/ifgqtltx.html