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

问题描述

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

鼠标选中的效果图如下

方式一：使用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标签上，那么整个页面的文字什么的都不能被选中了…

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

两种方式构建vue单页面多组件应用
方法一.使用vue的v-if指令该指令可以根据表达式的值实现html的元素或者vue的template模板切换,实现dom渲染,从而实现据绑定 / 组件被销毁并重建.借助该指令,实现多组件之间的切换 ...
python钉钉扫码登录程序_钉钉扫码登录网站(两种方式实现)
钉钉扫码登录网站(两种方式实现) 效果: 动手敲代码! 第一步,钉钉后台配置点击进入钉钉开发者平台的页面,点击左侧菜单的[移动接入应用-登录],然后点击右上角的[创建扫码登录应用授权],创建用于免 ...
钉钉扫码登录网站(两种方式实现)
钉钉扫码登录网站(两种方式实现) 效果: 源代码地址:https://github.com/jellydong/DingQrCodeLogin 动手敲代码! 第一步,钉钉后台配置参考链接:获取app ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
java提交数据到另一个页面_JS实现把一个页面层数据传递到另一个页面的两种方式...
由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...
java 读取css文件_java文件读取的两种方式
JAVA中读取文件(二进制,字符)内容的几种方 JAVA中读取文件内容的方法有很多,比如按字节读取文件内容,按字符读取文件内容,按行读取文件内容,随机读取文件内容等方法,本文就以上方法的具体实现给出代 ...
页面导航的两种方式——声明式导航、编程式导航||vue-router编程式导航||router.push() 方法的参数规则
页面导航的两种方式 vue-router编程式导航编程式导航基本用法 <!DOCTYPE html> <html lang="en"><head&g ...
【转】系统缓存全解析二：动态缓存（2）－页面局部缓存的两种方式
有时缓存整个页面是不现实的,因为页的某些部分可能在每次请求时都需要变化.在这些情况下,只能缓存页的一部分.顾名思义,页面部分缓存是将页面部分内容保存在内存中以便响应用户请求,而页面其他部分内容则为动态 ...
“高级”CSS样式一般应用于控制网页内容的外观。附加样式表分为内嵌样式表和外部样式表两种方式。
"高级"CSS样式一般应用于控制网页内容的外观.附加样式表分为内嵌样式表和外部样式表两种方式.

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

问题描述

方式一：使用user-select属性

方式二：onselectstart事件

总结

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

最新文章

热门文章