两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
问题描述
我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的。但是有的时候,这种效果我们并不想要的,比如用户点快了的时候,所以我们需要禁用这种效果,本文记录一下禁用选中效果的方式
鼠标选中的效果图如下
文章图片
方式一:使用user-select属性
user-select:none;
即可,若需要做浏览器兼容处理,请看下方完整写法:
代码如下
Document - 锐客网 h2 {
/* 火狐 */
-moz-user-select: none;
/* Safari 和 欧朋 */
-webkit-user-select: none;
/* IE10+ and Edge */
-ms-user-select: none;
/* Standard syntax 标准语法(谷歌) */
user-select: none;
}
你好啊CSS
当然我们通过js选中dom元素去设置css样式也是可以的:
document.querySelector('h2').style.userSelect = "none"
el-table也使用了user-select这个属性审查元素图解一下:
![两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果](https://img.it610.com/image/info9/09d420391a7b47b582f1f2f1d492d8fb.jpg)
文章图片
MDN官方概念定义传送门: https://developer.mozilla.org...onselectstart事件 onselectstart 就是用户选中DOM元素时候,被开始选中时,即将要被选中,实际未被选中的这个事件。我们只要让这个事件返回false,也就是结束这个事件,所以就不会有选中事件了,也就不会出现我们不想要的那种效果,代码如下,两种写法
写法一 写在标签上面
你好啊CSS,不能被鼠标选中
写法二 通过绑定事件的形式
你好啊CSS,不能被鼠标选中
总结 【两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果】文中介绍了两种方式实现禁用选中效果,一种是通过css控制,另一种是通过js控制。注意,如果是设置在body标签上,那么整个页面的文字什么的都不能被选中了...
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM