JavaScriptを無効にする選択

Web 開発では、違法コピーなどのリスクにさらされないように、ユーザーが Web ページ内の特定の要素を選択できないようにする必要がある場合があります。現時点では、JavaScript の非常に実用的な機能である選択を無効にすることが利点を示しています。

選択を無効にするということは、Web ページ上の要素を選択した後、ブラウザーがこの要素のテキストやその他のコンテンツをクリップボードにコピーしないことを意味します。 Javascript ではこの機能を非常に簡単に実装できます。

メソッドは次のとおりです:

// 防止选中文本
function disableSelection(element) {
    if (typeof element.onselectstart != 'undefined') {
        element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != 'undefined') {
        element.style.MozUserSelect = 'none';
    } else {
        element.onmousedown = function() { return false; };
    }
}
// 调用示例
disableSelection(document.body);

この関数の機能は、渡された要素変数の選択を無効にすることです。要素に onselectstart 属性が設定されている場合は、それを false に設定して、デフォルトの selected イベントが発生しないようにします。プロパティが存在しない場合は、引き続き MozUserSelect プロパティがあるかどうかを確認します。この属性も存在しない場合は、要素の onmousedown を false に設定します。

特定の要素が選択されないようにするには、慎重に選択可能なクラスを要素に追加し、クラスの MozUserSelect 属性をオーバーライドします。

コード例は次のとおりです:

.careful-selectable {
    -moz-user-select: text !important;
    -webkit-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

上記のコードでは、要素がどのように設定されても、特定のクラスの属性が ! important に設定されています。選ばれる。 user-select 属性を設定することで、テキストは選択可能だが右クリックによるコピーは禁止などの機能も実現できます。

JavaScript では、選択を無効にするだけでなく、イベント ハンドラーによるコピーや切り取りも無効にすることができます。

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

// 防止复制和剪切
function disableCopyAndCut(element) {
    element.addEventListener('copy', function(e) {
        e.preventDefault();
        console.log('禁止复制！');
    });
    element.addEventListener('cut', function(e) {
        e.preventDefault();
        console.log('禁止剪切！');
    });
}
// 调用示例
disableCopyAndCut(document.body);

上記のコードでは、最初に要素パラメーターを渡し、次に要素のコピー イベントとカット イベントにそれぞれリスナーを追加します。どちらの場合も、preventDefault() メソッドを使用してデフォルトの動作がトリガーされないようにすることで、コピーと切り取りを無効にします。

つまり、JavaScript で選択、コピー、切り取りなどの操作を無効にするのは非常に簡単で、特定の要素にいくつかのプロパティまたはイベント ハンドラーを設定するだけでこれを実現できます。 Webページを制作する際、著作権やプライバシーなどの機密情報が関わる場合、選択を無効にするなどの操作が必須となります。

以上がJavaScriptを無効にする選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。