代码之家 › 专栏 › 技术社区 › Tom Gullen

Javascript不可选择的文本在Chrome/IE中不起作用

selectable text javascript

Tom Gullen · 技术社区 · 15 年前

在Firefox看起来不错,Chrome和Internet Explorer的文本仍然是可选的,有什么办法可以解决这个问题吗?代码取自另一个问题(我现在找不到),所以可能已经过时了?

// Prevent selection
function disableSelection(target) {
    if (typeof target.onselectstart != "undefined") // Internet Explorer route
        target.onselectstart = function() { return false }
    else if (typeof target.style.MozUserSelect != "undefined") // Firefox route
        target.style.MozUserSelect = "none"
    else // All other routes (for example, Opera)
        target.onmousedown = function() { return false }
}

在代码中用作:

disableSelection(document.getElementById("gBar"));

4 回复 | 直到 6 年前

Dr.Molle 15 年前

用于webkit khtmlUserSelect 而不是 MozUserSelect .

在opera和MSIE中,您可以将不可选择的属性设置为“On”

由于与gecko/webkit相关的两种样式都是CSS,因此可以使用一个类来应用它:

<script type="text/javascript">
<!--
function disableSelection(target)
{
  target.className='unselectable';
  target.setAttribute('unselectable','on');
}
//-->
</script>
<style type="text/css">
<!--
.unselectable{
-moz-user-select:none;
-khtml-user-select: none;
}
-->
</style>

注意:不可选择不会传递子元素,因此如果目标中除了textNodes之外还有其他元素,则需要针对MSIE/opera已经有的解决方法。

sergey gurevich 12 年前

上面的例子都太复杂了。。基于浏览器版本。我有简单的解决方案。。。适用于所有浏览器!

// you can select here which html element you allow to be selected
var ExcludeElems = ["INPUT","SELECT","OPTION"]



function disableSelection (target) {
   // For all browswers code will work .....
   target.onmousedown = function (e) 
  {
     var i;
     var e = e ? e : window.event;

     if (e) 
      for (i=0; i<ExcludeElems.length;i++)
        if (e.target.nodeName == ExcludeElems[i] ) 
           return true;
     return false;
  }

如果需要,可以使此函数更复杂。对任何容器元素使用此代码。。。

disableSelection (document) 
//disableSelection (document.body) 
//disableSelection (divName) ....

sje397 15 年前

对于Wekbit(例如Chrome和Safari),您可以添加:

else if (typeof target.style.webkitUserSelect != "undefined") // Webkit route
    target.style.webkitUserSelect = "none";

对于IE,使用“不可选择”:

else if (typeof target.unselectable != "undefined") // IE route
    target.unselectable = true;

参考: http://help.dottoro.com/ljrlukea.php

Christian Tellnes 15 年前

就像Firefox中的MozUserSelect样式一样 -webkit-user-select: none 对于基于Webkit的浏览器(如Safari和Chrome)。

我想你可以用 -o-user-select: none 在歌剧里。但我没有测试过。

// Prevent selection
function disableSelection(target) {
    if (typeof target.onselectstart != "undefined") //IE route
        target.onselectstart = function() { return false }
    else if (typeof target.style.userSelect != "undefined") //Some day in the future?
        target.style.userSelect = "none"
    else if (typeof target.style.webkitUserSelect != "undefined") //Webkit route
        target.style.webkitUserSelect = "none"
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
        target.style.MozUserSelect = "none"
    else //All other route (ie: Opera)
        target.onmousedown = function() { return false }
}

对于IE,也许这可以帮助您: http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx