两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果

news2025/8/8 8:52:36

问题描述

我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的。但是有的时候,这种效果我们并不想要的,比如用户点快了的时候,所以我们需要禁用这种效果,本文记录一下禁用选中效果的方式

鼠标选中的效果图如下
在这里插入图片描述

方式一:使用user-select属性

css设置user-select:none;即可,若需要做浏览器兼容处理,请看下方完整写法:

/* 火狐 */
  -moz-user-select: none;
  /* Safari 和 欧朋 */
  -webkit-user-select: none;
  /* IE10+ and Edge */
  -ms-user-select: none;
  /* Standard syntax 标准语法(谷歌) */
  user-select: none;

在这里插入图片描述

方式二:onselectstart事件

onselectstart 就是用户选中DOM元素时候,被开始选中时,即将要被选中,实际未被选中的这个事件。我们只要让这个事件返回false,也就是结束这个事件,所以就不会有选中事件了,也就不会出现我们不想要的那种效果,代码如下,两种写法

写法一 写在标签上面

<h2 onselectstart="return false;">你好啊CSS,不能被鼠标选中</h2>

写法二 通过绑定事件的形式

<body>
    <h2>你好啊CSS,不能被鼠标选中</h2>
    <script>
        document.querySelector('h2').onselectstart = function () {
            return false
        }
    </script>
</body>

总结

文中介绍了两种方式实现禁用选中效果,一种是通过css控制,另一种是通过js控制。注意,如果是设置在body标签上,那么整个页面的文字什么的都不能被选中了…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/34394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TensorFlow之文本分类算法-3

1 前言 2 收集数据 3 探索数据 4 选择模型 5 准备数据 N-gram向量集 序列向量集 序列向量集主要是用于序列模型中对文本执行分词与向量化&#xff0c;与n-gram向量集类似&#xff0c;也使用特征选择与标准化的技术优化序列向量集的表示。 在一些文本样例中&#xff0c;…

GaussDB-物理、逻辑备份 使用方法和[GAUSS-53403]解决办法

文章目录1.逻辑备份-gs_dump2.逻辑备份恢复数据库3.物理备份&#xff08;分布式集群验证&#xff09;查看物理全量备份集&#xff1a;查看物理增量备份集&#xff1a;查看所有备份集&#xff08;该命令无法确定备份是否有效&#xff09;停止物理备份&#xff1a;使用物理备份集…

centos7安装mysql8.0.31

mysql 官网 https://www.mysql.com/ 找到对应的版本 然后下载 连接虚拟机 mysql 会和 mariadb这个有冲突&#xff0c;需要卸载掉 查看是否有mariadb rpm -qa|grep mariadb rpm -e --nodeps mariadb-libs 这个是强制卸载命令 再查看一下 rpm -qa|grep mariadb 在根目录创建…

2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 问题一python代码实现(更新完毕)

2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 思路及代码实现(持续更新完毕) 更新信息 2022-11-24 10:00 更新问题1和问题2 思路 2022-11-24 23:20 更新问题一代码 2022-11-25 11:00 更新问题二代码 相关链接 【2022 APMCM亚太数学建模竞赛 C题 全球是否变暖 问题一pytho…

高性能数据访问中间件 OBProxy(六):一文讲透数据路由

在《高性能数据访问中间件 OBProxy&#xff08;五&#xff09;&#xff1a;一文讲透数据路由》中&#xff0c;我们讲到了数据路由影响因素包括功能因素、性能因素和高可用因素。本文主要介绍高可用因素相关的内容。 相比传统的 IOE 架构&#xff0c;OceanBase 利用更低的成本实…

【你不知道的javascript上】2. 第三章 全局作用域,函数作用域和块作用域,立即执行函数

预警&#xff1a;【你不知道的javascript】开头的文章&#xff0c;是用来总结书籍《你不知道的Javascript》中我不熟悉的知识&#xff0c;单纯的用来巩固学到的知识&#xff0c;和加深记忆。 可能有些地方我理解的不透彻&#xff0c;所以不能够保证内容的正确性&#xff0c;欢迎…

使用Mysqldump进行定时全备和增备脚本

使用mysqldump进行全备&#xff0c;增备是备份binlog日志 对应的一些变量按照实际环境进行修改即可&#xff0c;如果有更好的思路也可以进行评论交流。 配合计划任务即可完成定时备份的需求&#xff0c;脚本中备份文件存放目录提前创建或者在加个判断进行创建不过我觉得没啥必…

UNIAPP实战项目笔记44 订单页面顶部选项卡 有数据页面样式布局和无数据页面样式布局

UNIAPP实战项目笔记44 订单页面顶部选项卡 有数据页面样式布局和无数据页面样式布局 订单页面顶部选项卡 具体内容图片自己替换哈&#xff0c;随便找了个图片的做示例 具体位置见目录结构 通过 v-show 的false 和 true来切换有无数据页面布局 代码 my-order.vue 页面部分 my-…

[附源码]java毕业设计医院挂号管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

自动化测试定位不到元素怎么办?

1.动态id定位不到元素 分析原因&#xff1a;每次打开页面&#xff0c;ID都会变化。用ID去找元素&#xff0c;每次刷新页面ID都会发生变化。 解决方案&#xff1a;推荐使用xpath的相对路径方法或者cssSelector查找到该元素。 2.iframe原因定位不到元素 分析原因&#xff1a;…

studio3T import a SQL Database to Mongodb(从mysql中导入数据到mongodb)

具体参考studio3T官方文档&#xff1a;Import a SQL Database to MongoDB in 5 Steps | Studio 3T 1、打开SQL Migration-->选择SQL to MongoDB Migration 2、创建源数据库的连接&#xff08;本文源数据库是mysql&#xff09; 3、选择目标数据库 默认选择当前连接的数据库…

【观察】OceanBase社区版4.0:引领时代,更创造时代

今年8月10日&#xff0c;在2022 OceanBase年度发布会上&#xff0c;OceanBase 4.0首次亮相&#xff0c;在经过85天的快速升级迭代&#xff0c;且历经内外部客户的场景测试与真实业务场景的稳定性“打磨”之后&#xff0c;OceanBase 4.0将“简单易用”的应用感受留给了客户。而在…

JS中的setter、getter数据存取器

JS属性可分为两种类型 ① 数据属性    只是简单存储了一个值 ② 存取器属性    最大的特点是在设置、获取属性值的时候能够做一些其他的操作 设置存取器属性的两种方式 ① 直接在对象中设置 let obj {count: 5, // 普通的数据属性// index为存取器属性_index: 1, // _in…

Linux系统上搭建Java的运行环境,并且部署JavaWeb程序

Linux系统上搭建Java的运行环境&#xff0c;并且部署JavaWeb程序 1.JDK 基于yum【包管理器】来进行安装即可。 yum list列出应用商店上所有的软件包名字。 yum list | grep jdk验证安装成功&#xff01;&#xff01; 2.Tomcat 由于yum商店里的tomcat的版本过低&#xff0…

SpringBoot SpringBoot 原理篇 1 自动配置 1.6 bean 的加载方式【四】

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 原理篇 文章目录SpringBootSpringBoot 原理篇1 自动配置1.6 bean 的加载方式【四】1.6.1 Import1 自动配置 1.6 bean 的加…

正大数据周五新鲜报 做期货要关注哪块消息?

正规的外盘期货公司都是在香港证监会的监管下&#xff0c;持有合法合规金融牌照。这点好比国内证券和期货公司在中国证监会的监管下一个道理&#xff0c;完全正规合法。 ​ ​如果你是想做主账户往下开展业务&#xff1a; 一、进入香港证监会官网查询该期货公司的编号 二、…

Spring 中 Bean 的作用域和生命周期

目录 1. Bean 的作用域 1.1 Bean 的六大作用域 1.1.1 单例作用域 (singleton) 1.1.2 原型作用域 (prototype) 1.1.3 请求作用域 (request) 1.1.4 会话作用于 (session) 1.1.5 全局作用于 (application) 1.1.6 HTTP WebSocket 作用域 (websocket) 1.2 如何设置 Bean 的…

142.如何个性化推荐系统设计-2

142.1 离线训练 离线训练流程 如何线上实时反馈特征&#xff1f; 在线计算&#xff0c;与曝光日志一起上报&#xff0c;离线直接使用 如何解决曝光不足问题&#xff1f; 使用CTR的贝叶斯平滑&#xff08;CTR 曝光次数 / 点击次数&#xff09; 所有新闻自身CTR服从Beta分布: 某…

199道SpringCloud面试题,你能答上来吗

前言 Spring Cloud Alibaba 是阿里中间件团队主导的一个新生项目&#xff0c;正处于高速迭代中。 其次&#xff0c;对于中国用户来说&#xff0c;Spring Cloud Alibaba 还有一个非常特殊的意义&#xff1a;它将曾经红极一时的 Dubbo&#xff0c;以及阿里巴巴的强力消息中间件…

每天花2小时复习Java面试指南,高级架构视频,我进了阿里定级P7

Java进阶架构师必备 基础 容器 并发 JVM Java8 计算机网络 计算机操作系统 Linux 数据结构 算法 mysql (优化思路) 系统设计 分布式 线上问题调优(虚拟机&#xff0c;tomcat) 面试指南 工具 ​ 编辑 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&…