【CSS】设置文字不能被选中&解除限制

最新推荐文章于 2025-06-18 09:12:24 发布

原创最新推荐文章于 2025-06-18 09:12:24 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #firefox #html

前端专栏收录该内容

77 篇文章

订阅专栏

本文介绍两种禁止网页元素被选择的方法：一是使用JavaScript针对不同浏览器特性（如IE的onselectstart和Firefox的鼠标事件）实现；二是利用CSS属性（如user-select）阻止用户选择元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：JS


if (typeof(element.onselectstart) != "undefined") {        
    // IE下禁止元素被选取        
    element.onselectstart = new Function("return false");        
} else {
    // firefox下禁止元素被选取的变通办法        
    element.onmousedown = new Function("return false");        
    element.onmouseup = new Function("return true");        
}

IE下有 onselectstart 这个方法，通过设置这个方法可以禁止元素文本被选取。而firefox下没有这个方法，但可以通过css或一种变通的办法解决。

另一种方法是：

ie:document.selection.empty()
ff:window.getSelection().removeAllRanges()

兼容的写法：

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

这种方法不但不影响拖放对象的选择效果，还能对整个文档进行清除。

方法二：CSS

div {
      -moz-user-select:none;
      -webkit-user-select:none;
      user-select:none;    
}