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

这个时候就用到了  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. 架构师养成记--22.客户端与服务器端保持连接的解决方案,netty的ReadTimeoutHandler

    概述 保持客户端与服务器端连接的方案常用的有3种 1.长连接,也就是客户端与服务器端一直保持连接,适用于客户端比较少的情况. 2.定时段连接,比如在某一天的凌晨建立连接,适用于对实时性要求不高的情况. ...

  2. 直接线性变换解法(DLT)用于标定相机

    直接线性变换法是建立像点坐标和相应物点物方空间坐标之间直接的线性关系的算法.特点:不需要内外方位元素:适合于非量测相机:满足中.低精度的测量任务:可以标定单个相机. 1 各坐标系之间的关系推导直接线性 ...

  3. java内存的分配策略

    1.概述 本文是<深入理解java虚拟机>(周志明著)3.6节的笔记整理,文章结构也与书上相同,讲述的是几条最普遍的内存分配策略. 2.对象优先在Eden分配 ** 大多数情况下,对象在新 ...

  4. 【性能测试】:关于Sockets协议的脚本的开发

    一,关于Sockets协议的脚本,首先对报文的解析是一个关键, 报文的解析一般对着接口文档,弄清楚每个字段代表什么意思,如下一段报文,放在data.ws中 "\x00\x00\x01\x5C ...

  5. dubbo服务引用与集群容错

    服务引用无非就是做了两件事 将spring的schemas标签信息转换bean,然后通过这个bean的信息,连接.订阅zookeeper节点信息创建一个invoker 将invoker的信息创建一个动 ...

  6. Basic Calculator - Stack(表达式计算器)

    978. Basic Calculator https://www.lintcode.com/problem/basic-calculator/description public class Sol ...

  7. Neo4j使用简单例子(转)

    Neo4j Versions Most of the examples on this page are written with Neo4j 2.0 in mind, so they skip th ...

  8. 我最近用Python写了一个算法,不需要写任何规则就能自动识别一个网页的内容

    我最近用Python写了一个算法,不需要写任何规则就能自动识别一个网页的内容,目前测试了300多个新闻网站的新闻页,都能准确识别

  9. Linux系统编程:socket网络编程(操作篇)

    一.问题思考 问1.网络通信应用在什么场合?通信的前提是什么? 答1.主要应用在不同主机进程间的互相通信,同一主机的进程也可以使用网络进行通信.通信的前提是如何标识通信进程的唯一,由于不同主机的进程极 ...

  10. hibernate基本配置

    将讲解表名类名不一致.属性名列名不一致.不持久化某属性.Date类型的注解.枚举类型的注解(枚举类型在xml配置有点麻烦不说了),说明都在代码注释里. 项目目录: 注解方式以Teacher类为例,xm ...