两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果_百 ...
发布网友
共1个回答
热心网友
了解浏览器上的文字选中行为，双击或单击拖动都能实现选中，常用在复制、编辑等场景。然而，有时不希望用户产生此类操作，本文将记录两种方法以禁用此功能。
选中文字的效果如图所示。
方法一：借助`user-select`属性
通过设置`user-select:none;`即可禁用选中效果。若需考虑浏览器兼容性，请参照完整写法。可通过js动态修改样式，例如：document.querySelector('h2').style.userSelect = "none"。`el-table`组件中也运用了此属性。
审查元素功能可直观展示这一效果。
MDN官方对此属性的定义请参考这里。
方法二：利用`onselectstart`事件
`onselectstart`事件在用户尝试开始选中DOM元素时触发，可在此处阻止选中操作。实现方式有两种：一种是直接在标签上写入该事件处理程序，另一种是通过绑定事件。代码如下：
示例代码如下所示，包含两种写法。
**标签直接写入**：**你好啊CSS，不能被鼠标选中**
**绑定事件形式**：
**总结**：文章阐述了两种禁用选中效果的策略，一种是通过CSS实现，另一种通过JS控制。需注意，将此设置应用于body标签时，页面上的所有文字将失去选中功能...
