Web ページの右クリック メニューをブロックし、選択とコピーを禁止する JavaScript と JQuery についての詳細なディスカッション_javascript スキル

私が初めて動的 HTML と JavaScript に触れたとき、マウスの右クリックのブロックに関するスクリプト コードに出会ったのを覚えています。当時、これらのコードの多くは、閲覧者がテキストなどをコピーするのを防ぐために使用されていました。その後、このアプローチがユーザー エクスペリエンスに沿っていないことが実際に応用されることで証明され、たとえば、私はかつてコピーの禁止を解除する方法を説明する記事を書きました。ウェブページ上で。

右クリックとコピーを制限するのは賢明ではないことはわかりますが、今日は Web ページのコピーと右クリック メニューの禁止について話したいと思います。一部のデスクトップ プログラムは実際には Web ページと JavaScript で実装されていますが、一部のモバイル アプリケーションは HTML5 JavaScript で実装することもできます。この場合、右クリックを制限する必要があります。 APP としては、Web ページ上の右クリックのテキスト選択やポップアップ メニューはほとんどの場合不要です。

次の紹介はコードの特定の側面のみをカバーしているかもしれませんが、誰もが推論できると信じています:-)

1. ラフバージョンではコピーが制限されるか、右クリックが禁止されます

まず、閲覧者が Web ページ上のテキストをコピーすることを大まかに制限または禁止する方法について説明します。閲覧者がテキストを通常どおりコピーできないようにするには、マウスの右クリック、選択などのユーザーの特定の操作を無効にすることを考えなければなりません。 、コピーなど、これらの操作は、対応するスクリプト イベントに対応します。これらのイベントにメソッドを追加して false を返せる限り、コピーを禁止するスクリプト コードは一般的に実行できます。

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

window.onload = function( ) {
with(document.body) {
oncontextmenu=function(){return false}
ondragstart=function(){return false}
onselectstart=function(){return false}
onbeforecopy=function(){return false}
onselect=function(){document.selection.empty()}
oncopy=function(){document.selection.empty()}
}
}

なぜこれが呼ばれるのか メソッドの粗雑なバージョンはどうですか?この方法を使用してマウスの右ボタンを無効にすると、Web ページ上のコントロールを右クリックしたり選択したりできなくなるため、Web ページが硬直した絵になっているように見えるかもしれません。 , ただし、入力ボックスやテキストエリアのテキストボックスなどの文字入力コントロールの場合は、これに大きく関係しています。これらの場所は、ユーザーの右クリックとコピー選択操作を制限できません。

2. 制限する HTML タグ要素を合理的に決定する

現在処理されているレイヤーの要素タグを確認する方法、つまり、マウスが現在配置されている HTML タグを取得する方法。ここでは、実際に document.body で渡される関数を例として取り上げます。 oncontextmenu には省略するパラメータがあります。はい、完全な記述方法は document.body.oncontextmenu=function(e){} になります。ここで、e は JavaScript の Event オブジェクトであり、IE の window.event を通じて取得できます。このイベント オブジェクトを通じて、イベントがトリガーされたときにマウスが存在する HTML タグを取得できます。ここでは、次のような関数を提供します。

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

var isTagName = function(e, ホワイトリスト) {
e = e ||
var target = e.target || e.srcElement;
Array.prototype.contains = function(elem)
{
for ( var i in this) {
if (this [i] .tstand ().Touppercase () == ELEM.TOSTRING ().TOUPPERCASE ()) true を返す
}
を返すfalse;> if（whitelists &&！whitelists.contains（target.tagname））{
false;

ここでの e はイベントオブジェクトのイベント、ターゲットはイベントオブジェクトが参照する要素オブジェクトです。 もちろん、ここでの両方の変数は IE と互換性のある方法で記述されています。詳しくは、を参照してください。ここでのホワイトリストは、['INPUT', 'TEXTAREA'] などのホワイトリスト HTML 要素タグのタグ名です。これは、入力テキストを意味します。現在のイベント要素が Return true の場合、ボックス入力とテキストエリアが判定に追加され、次のコードを通じてマウスの右ボタンを選択的にブロックできます:

コードをコピーします コードは次のとおりです:

document.body.oncontextmenu=function(e){
return isTagName(e, ['A' 、'TEXTAREA']);
}

3. JQuery バージョンの選択的ブロックによりテキストの選択が禁止されます

同様に、JQuery でサポートされている環境では、StackOverflow で「jQuery を使用してテキスト選択を無効にする方法?」というような記事を見つけましたが、選択が禁止されていることがわかります。具体的なコードは次のとおりです:

コードをコピーします コードは次のとおりです:

(function( $){

$.fn.ctrlCmd = function(key) {

var allowedDefault = true;

if (!$.isArray(key) )) {
Key = [key];
}

return this.keydown(function(e) {
for (var i = 0, l = key.length; i
; l; i）{
if（e.keycode === kepercase（）。
};


$.fn.disableSelection = function() {

this.ctrlCmd(['a', 'c ']);

return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
-moz-user-select':'none ',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit -User-select ':' None ',
' -MS-User-SELECT ':' なし ',
' User-SELECT ':' なし '})
.bind (' sexctstart ' false);
};

})(jQuery);

次のコードを使用します:

コードをコピー

コードは次のとおりです:$(':not(input,select,textarea)').disableSelection();

このようにして、input、select、textarea 以外の選択を禁止できます。このコードのトリックは、開始の選択に加えて、関連する要素に特殊なブラウザーでサポートされているいくつかの CSS 機能も追加することです。ほとんどのブラウジングを実現します。 同時に、このコードはキーボードの Ctrl A と Ctrl C のキー選択もブロックします。作者の思慮深い配慮に感心します。

4. さらなる改善: マウスのクリック操作をシールドします

このコードをテストするときに遭遇した問題は、input、select、textarea 以外の要素をクリックすると、すべてのページが選択されてしまうということです。元の作成者は、使用法コードに .on('mousedown を追加するという簡単な方法を提供していました)。 . ', false) なので、マウスのクリックをブロックします:

コードをコピーします

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

$(':not(input,select,textarea)').disableSelection().on('mousedown', false);

しかし、上記を実行した後に問題が再び発生したことがわかりました。 code、Input、select、textarea も異常になり始め、マウスダウンをブロックする機能がすべての要素に適用されたようです。ここで考え方を変え、先ほど提案したソリューションを組み合わせてイベント オブジェクトを判断し、選択的シールドを実現します。

コードをコピーします コードは次のとおりです:

$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) {
varevent = $.event.fix(e);
var elem =event.target || e.srcElement;
if (elem.tagName.toUpperCase() != 'TEXTAREA' && elem. tagName.toUpperCase() != 'INPUT') {
e.preventDefault();
return false;
}
return true;
});

Thisテキストエリアと入力が制限されない場合、このコードを関数に抽出します。

コードをコピーします。 コードは次のとおりです。

function jQuery_isTagName(e, ホワイトリスト) {
e = $.event.fix(e);
var target = e.target ||
if (whitelists && $.inArray( target.tagName.toString().toUpperCase(),whitelists) == -1) {
return false not(input,select,textarea)').disableSelection()。 on('mousedown', function(e) {
if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) {
e.preventDefault();
return false;
}
true を返します;
});



5. JQuery バージョンの選択的ブロックにより、マウスの右ボタンが禁止されます

右クリック メニューの場合、次のように処理できます。

コードをコピーします

コードは次のとおりです。 $(document).bind("contextmenu",function(e){ if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) { e.preventDefault();

return false;

}
return true;
});