javascript:禁用文本选择

Question

我正在使用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>

类似的脚本可以在这里找到:http://rainbow.arch.scriptmania.com/scripts/no_right_click.html

在我的本地主机上:所有浏览器(Firefox,Chrome,IE和Safari)运行良好.

在我的Live网站上:除了Firefox之外一切正常.

我的问题是:

1. 有没有人建议为什么Firefox对于实时站点和本地主机的行为不同.注意:Javascript已启用.

2. 也许我的脚本过于简单,所以我尝试了以下完全相同的结果:http://freeware.ke-zo.com/CODES/DisableRC.txt

Answer 1

只需使用这个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禁用文本选择突出显示？

Answer 2

我正在编写滑块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(); });

Answer 3

对于JavaScript使用此功能:

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

启用选择使用此:

function reEnable() {return true}

并在任何地方使用此功能:

document.onclick = reEnable

Answer 4

如果你有一个这样的 html 页面：

    <身体
    onbeforecopy = "返回假"
    ondragstart = "返回假" 
    onselectstart = "返回假" 
    oncontextmenu = "返回假" 
    onselect = "document.selection.empty()" 
    oncopy = "document.selection.empty()">

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

document.write(document.body.innerHTML)

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

Answer 5

也可以使用，在所有浏览器中都可以正常工作，需要 javascript：

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

例子：

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

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

另一种 js 替代方案，通过测试 CSS 支持和禁用userSelect，或MozUserSelect用于 Firefox。

Select me!

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"

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

Select me!

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

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