javascript：テキスト選択を無効にする

私はJavaScriptを使用してWebisteでのテキスト選択を無効にしています。

コードは次のとおりです。

<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）はうまく機能します。

私のライブサイト： Firefoxを除いてすべてOK。

私の質問は次のとおりです。

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 = "return false"
    ondragstart = "return false" 
    onselectstart = "return false" 
    oncontextmenu = "return false" 
    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!

CSSのサポートをテストし、無効にするuserSelect、またはMozUserSelectFirefox用のもう1つのjsの代替手段。

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
}