在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好。

这个时候就用到了  user-select:none; 属性。

因为存在着兼容性的问题,所以在写的时候就需要考虑一下了。

div{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}

这样这个区域的文字就不会被选中了。

还有种方法就是在相应的元素上添加  onselectstart="return false;"

<section onselectstart="return false;">这又是一段文字</section>

这样也是可以实现不被选中的效果。

如果把上述的方法写到body中,就实现了禁止用户选中页面上内容的效果。

*在网页上选择文本的功能在许多用户方案中非常重要,假如是一个新闻页面,新闻的内容是可以被选中的,但是页面还可能包含用户不需要或不希望选择的菜单,广告和指向站点、等。所以使用的时候还是看需求了。

css取消双击选中文字的更多相关文章

  1. css禁止鼠标双击选中文字

    div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...

  2. 用css改变鼠标选中文字的样式

    打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图: 那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色 我们在css文件中插入如下代码: ::- ...

  3. 【React踩坑记一】React项目中禁用浏览器双击选中文字的功能

    常规项目,我们只需要给标签加一个onselectstart事件,return false就可以 例: <div onselectstart="return false;" & ...

  4. CSS阻止页面双击选中文本

    转载自:w3cui 在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题IE及Chrome下的方法一样,对相应的元素 ...

  5. hexo中加入点击出现小红心的特效会导致无法双击选中和连续点击三次选中一整行的操作

    文章目录 问题描述 解决 个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 问题描述 如题,我们 ...

  6. CSS3禁止用户选中文字——user-select: none;

    需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图    解决方法:使用CSS3新增属性 user-select: none;   -webkit-user-select:non ...

  7. 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...

  8. Windows 10设置桌面图标间距、窗口的背景颜色、选中文字的背景颜色

    Windows 10取消了“高级外观设置”(或者叫“窗口颜色和外观”设置),想调整一些参数只能进注册表了. 修改后可能需要注销或重启才能生效. 按Win+R,然后输入regedit进入注册表编辑器. ...

  9. macOS Sierra 触控板无法三指拖移窗口、三指选中文字的解决方法

    问题:升级macOS Sierra新系统后,发现触摸板无法进行三指拖移窗口.三指选定文字的操作.在“系统偏好设置”——“触控板”内无法进行设置. 解决:“系统偏好设置”——“辅助功能”——“鼠标与触控 ...

随机推荐

  1. SHELL脚本进阶

    一.读取参数 $0 程序名称$1 第一个参数$2 第二个参数,依次类推可以使用 basename 来读取程序名称:basename $0 可以使用 dirname 来读取第一个参数的目录:dirnam ...

  2. 2018焦作网络赛 - Poor God Water 一道水题的教训

    本题算是签到题,但由于赛中花费了过多的时间去滴吧格,造成了不必要的浪费以及智商掉线,所以有必要记录一下坑点 题意:方格从1到n,每一格mjl可以选择吃鱼/巧克力/鸡腿,求走到n格时满足 1.每三格不可 ...

  3. Mac下快速新建txt文件

    1.打开终端,定位到桌面 cd desktop 2.输入 vi test.txt 此时,一个txt文件就会建立在桌面上,操作vi时的提示:按[i]为输入内容,编辑好之后按[esc]键,然后输入[:wq ...

  4. (转)InnoDB存储引擎MVCC实现原理

    InnoDB存储引擎MVCC实现原理 原文:https://liuzhengyang.github.io/2017/04/18/innodb-mvcc/ 简单背景介绍 MySQL MySQL是现在最流 ...

  5. 【Maven学习】远程仓库的配置

    很多情况下,默认的中央仓库无法满足项目的需求,我们可能需要配置新的远程仓库,此时我们可以这样配置: <repository> <id>java-net</id> & ...

  6. ES5支持的方法

    ES5的支持的方法 concat() 把元素衔接到数组中. every() 测试断言函数是否对每个数组元素都为真 filter() 返回满足断言函数的数组元素 forEach() 为数组的每一个元素调 ...

  7. C 扩展库 - sqlite3 API

    sqlite3 API Summary sqlite3 The database connection object. Created by sqlite3_open() and destroyed ...

  8. [作业] Python入门基础--猜年龄

    age = 20 while True: try: guess_age = int(input('guess age:')) if guess_age > age: print('Is bigg ...

  9. centos7中安装mongodb3.6

    centos7中安装mongodb3.6 首先更新系统 yum -y update 1.安装Mongodb 编辑Mongodb安装源 vim /etc/yum.repos.d/mongodb-org- ...

  10. 498_Diagonal-Traverse

    目录 498_Diagonal-Traverse Description Solution Java solution Python solution 1 Python solution 2 Pyth ...