知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    css禁止双击dom节点被选中user-select:none

    作者:佳明妈 来源:web前端开发 2016-10-02 人气:
    当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就会出现按钮

    css禁止dom节点被选中:

    当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就会出现按钮被选中,
    禁止这个特性可以使用css属性:user-select:none

    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    
    
    css禁止双击dom节点被选中user-select:none
    IE10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持,Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。 以较为典型的新闻网站为例,大多数页面中会包含一条正文报道,有用户习惯在浏览新闻报道的时候边阅读边用鼠标选中内容,或者选中正文内容与他人进行分享。 与此同时,新闻网站页面上还会包含一些其他内容和链接,用户可能不需要选取这些内容。利用 -ms-user-select 属性,Web 开发人员可以指定对内容正文开启文本选择功能, 而禁用选择其他内容。 IE Test Drive 网站上提供了对此项功能的演示示例: -ms-user-select 属性测试示例 对整个页面设置 -ms-user-select:none,然后对包含博客正文的元素设置 -ms-user-select:element,这样就可以仅允许选择博客正文的内容。 -ms-user-select:element 是 IE 首次引入的一个新属性,我们认为这一属性在许多情况下将非常实用。 设置 -ms-user-select:element 表示用户可以选择该元素的文本,但选择范围受该元素的边界的约束。希望选择正文内容的用户可能不希望选择紧跟在正文后面的页脚元素。 通过设置 -ms-user-select:element,用户可以轻松地选择正文内容,而不必担心鼠标拉动位置过大选取了多余的内容。

    -ms-user-select可设置4个值:

    text – 可以选择文本
    element – 可以选择文本,但选择范围受元素边界的约束
    none – 不可以选择文本
    auto – 如果该元素包含可编辑的文本(如输入元素或可编辑内容的元素),则可以选择文本。否则,元素内容是否可选择由父节点的值决定。
    -ms-user-select 的默认值为 auto。 通过将 -ms-user-select 设置为 none,开发人员可以禁用文本选择功能。 在IE浏览器中,如果将文本设置为 -ms-user-select:none,则用户将无法在该文本块中开始选择文本。 不过,如果用户在页面的其他区域开始选择文本,则用户可以在页面的任何区域(包括 -ms-user-select 设置为 none 的区域)继续选择文本。 在 Firefox 中,如果开发人员设置 –moz-user-select:none,则用户无法在该区域中开始选择文本,也无法在任何其他文本选择操作中包括该区域的文本。 在 Webkit 中,设置 –webkit-user-select:none 后,看起来该文本似乎并未包含在选择范围内,但是,当您复制并粘贴内容时,您会看到实际上已包含了该内容。 user-select 最初是在 CSS3 用户界面模块中提出的,之后,该模块被 CSS3 基本用户界面模块所取代,但是后者并未定义该属性。Mozilla 和 Webkit 均支持带自定义前缀的属性版本。 不过,如上所述,它们在属性实现方面略有差异。
    ↓ 查看全文

    css禁止双击dom节点被选中user-select:none由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    css禁止双击dom节点被选中user-select:none-最新评论