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

这个时候就用到了  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. QuantLib 金融计算——基本组件之 DayCounter 类

    目录 QuantLib 金融计算--基本组件之 DayCounter 类 DayCounter 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. QuantLi ...

  2. bzoj3956: Count (单调栈+st表)

    题面链接 bzoj 题解 非常巧妙的一道题 类似[hnoi影魔] 每个点会给左右第一个大于它的点对产生贡献 可以用单调栈求出 这里有点小细节,就是处理相等的点时,最左边的点管左边的贡献,最右边的点管最 ...

  3. np.array()和np.mat()区别

    1. 生成数组所需格式不同 mat可以从字符串或列表中生成:array只能从列表中生成 2. 生成的数组计算方式不同 array生成数组,用np.dot()表示矩阵乘积,(*)号或np.multipl ...

  4. DB2 命令大全

    check Archiving processing 查看日志归档情况 db2 "SELECT DATE(CAST(START_TIME as TIMESTAMP)) as DATE, co ...

  5. Java 并发编程——Callable+Future+FutureTask

    Java 并发编程系列文章 Java 并发基础——线程安全性 Java 并发编程——Callable+Future+FutureTask java 并发编程——Thread 源码重新学习 java并发 ...

  6. jmeter笔记

    Jmeter性能测试 入门 Jmeter 录制脚本:使用一个叫badbody的工具录制脚步供jmeter使用,http://www.badboy.com.au/:也可以用jmeter来录制 Jmete ...

  7. AngularJS Eclipse Plugin

    本文介绍如何安装和配置 AngularJS Eclipse.AngularJS Eclipse 插件是基于强大的 JavaScript 推断引擎(javascript inference engine ...

  8. PHP之string

    string addcslashes() Quote string with slashes in a C style 以 C 语言风格使用反斜线转义字符串中的字符 addslashes() Quot ...

  9. 对数几率回归法(梯度下降法,随机梯度下降与牛顿法)与线性判别法(LDA)

    本文主要使用了对数几率回归法与线性判别法(LDA)对数据集(西瓜3.0)进行分类.其中在对数几率回归法中,求解最优权重W时,分别使用梯度下降法,随机梯度下降与牛顿法. 代码如下: #!/usr/bin ...

  10. IOS runtime动态运行时一

    对运行时不太了解,今天小伙伴橄榄油陈高给发了个链接 ,看了一部分先存着以后慢慢品 http://www.cocoachina.com/ios/20141018/9960.html http://blo ...