javascript：禁用文本选择

我正在使用JavaScript禁用我的网站上的文本选择。

代码是：

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

类似的脚本可以在这里找到

在我的本地主机上：所有浏览器（Firefox，Chrome，IE和Safari）都可以正常工作。

在我的Live网站上：除Firefox外，一切正常。

我的问题是：

1. 是否有人对Firefox为什么对现场站点和本地主机的行为有所不同的建议？注意：已启用Javascript。

2. 也许我的脚本太简单了，所以我用完全相同的结果尝试了以下内容

只需使用以下CSS方法：

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

您可以在此处找到相同的答案：如何使用CSS禁用文本选择突出显示？

我正在编写滑块ui控件以提供拖动功能，这是我防止用户拖动时选择内容的方式：

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

绑定startDrag到您的dom：

<button onmousedown="startDrag">...</button>

如果要静态禁用所有元素上的文本选择，请在加载元素时执行代码：

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

      

对于JavaScript，请使用以下功能：

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

要启用选择，请使用以下命令：

function reEnable() {return true}

并在任何需要的地方使用此功能：

document.onclick = reEnable

如果您有这样的html页面：

    <身体
    onbeforecopy =“返回假”
    ondragstart =“返回假” 
    onselectstart =“返回假” 
    oncontextmenu =“返回假” 
    onselect =“ document.selection.empty（）” 
    oncopy =“ document.selection.empty（）”>

有一种禁用所有事件的简单方法：

document.write(document.body.innerHTML)

您获得了html内容并丢失了其他内容。

一个可能还会使用，在所有浏览器中都可以正常运行，需要javascript：

onselectstart = (e) => {e.preventDefault()}

例：

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }

Select me!

另一种js替代方法是，通过测试CSS的支持，然后禁用userSelect，或MozUserSelect针对Firefox。

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"

Select me!

纯CSS，逻辑相同。警告您必须将这些规则扩展到每个浏览器，这可能很冗长。

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}

<div>Select me!</div>

简单复制此文本并放在前面 </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}