JavaScript、JQueryのWebページのマウスの右クリックメニューを深く検討し、複製の選択を禁止する

動的HTMLやJavaScriptに触れ始めたばかりの頃、マウスの右ボタンマスクに関するスクリプトコードに触れたことがあるのを覚えています.当時、これらのコードの多くは閲覧者が許可を得ずにページ上の文字やその他の内容をコピーすることを防止するために使われていましたが、その後の実際の応用では、このようなやり方がユーザーの体験に合わないことが証明され、解読の方法もたくさんありました.例えば、ウェブページのコピー禁止を解除する方法を説明する文章を書いたことがあります.
このように、右クリックとコピーを制限するのは賢明ではありませんが、今日はウェブページのコピー、右クリックメニューを禁止することについてお話しします.ウェブアプリ技術の発展に伴い、ウェブアプリケーションとデスクトップアプリケーションの境界がますます曖昧になっているため、一部のデスクトッププログラムは実際にウェブページとJavaScriptによって実現されています.また、HTML 5+JavaScriptで実現できる携帯電話アプリもありますが、この場合、右ボタンを制限する必要があります.アプリとしては、Webページの右ボタン選択文字やポップアップメニューがほとんどの場合、必要ないように見えますから.
次に紹介するのは、ある側面のコードしか含まれていないかもしれませんが、私は皆さんが必ず逆三を挙げることができると信じています.-)
一、乱暴版の制限選択コピーまたは右マウスボタンの禁止
まず、どのように乱暴な制限や閲覧者の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ページはデッドラインの画像になっているようです.どうでもいいと思うかもしれませんが、input、textareaテキストボックスのような文字入力コントロールには大きな関係があります.これらの場所では、ユーザーの右ボタンを制限したり、コピー操作を選択したりすることはできません.
二、制限するHTMLタグ要素を合理的に判断する
現在処理されているレイヤが存在する要素ラベルをどのように判断するか、つまりマウスが現在存在するHTML Tagを得るか、ここではoncontextmenuを例にとるとdocument.body.oncontextmenuが入力した関数にはパラメータがあります.私たちは省略しました.完全な書き方はdocumentです.body.oncontextmenu=function(e){}ここのeはJavaScriptのEventイベントオブジェクトであり、IEではwindowを通過する可能性がある.eventが取得しました.このイベントオブジェクトを使用すると、イベントがトリガーされたときにマウスが存在するHTML Tagを取得できます.要素ラベルの処理を無視するかどうかを判断できます.ここでは、次の関数を提供します.

 
  
var isTagName = function(e, whitelists) { 
  
      e = e || window.event; 
  
      var target = e.target || e.srcElement; 
  
      Array.prototype.contains = function(elem) 
  
        { 
  
           for (var i in this) 
  
           { 
  
               if (this[i].toString().toUpperCase() == elem.toString().toUpperCase()) return true; 
  
           } 
  
           return false; 
  
        } 
  
      if (whitelists && !whitelists.contains(target.tagName)) { 
  
        return false; 
  
      } 
  
      return true; 
  
}; 
  
 
 

ここのeはイベントオブジェクトeventであり、targetはイベントオブジェクトが参照する要素オブジェクトである.もちろん、ここの2つの変数はIEに対応する書き方を取っている.具体的には「How can I make event.srcElement work in Firefox and what does it mean?」を参照することができる.ここでwhitelistsはホワイトリストHTML要素ラベルTag名であり、例えば['INPUT','TEXTAREA']は、入力テキストボックスinputとtextareaを判断に加えることを示し、現在のイベント要素がそうであればtrueに戻ることで、以下のコードでマウスの右ボタンを選択的に遮断することができます.

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

三、JQuery版の選択性遮蔽禁止テキスト選択
同じように他の操作に対しても選択的に遮蔽することができ、JQueryがサポートする環境の中でStackOverflowでこのような文章「How to disable text selection using jQuery?」を見つけました.説明の選択禁止ですが、参考にしてください.具体的なコードは以下の通りです.

 
  
(function($){ 
  
 
  
  $.fn.ctrlCmd = function(key) { 
  
 
  
    var allowDefault = true; 
  
 
  
    if (!$.isArray(key)) { 
  
       key = [key]; 
  
    } 
  
 
  
    return this.keydown(function(e) { 
  
        for (var i = 0, l = key.length; i < l; i++) { 
  
            if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) { 
  
                allowDefault = false; 
  
            } 
  
        }; 
  
        return allowDefault; 
  
    }); 
  
}; 
  
 
  
  
  
$.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':'none', 
  
                     'user-select':'none'}) 
  
               .bind('selectstart', false); 
  
}; 
  
 
  
})(jQuery); 
 

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

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

これによりinput、select、textareaを除いて選択が禁止され、このコードのテクニックはselectstartのほかに関連要素にいくつかの特殊なブラウザがサポートするCSS特性を追加することで、ほとんどのブラウザの互換性を実現することができ、同時にこの世代コードはキーボードボタン選択Ctrl+AとCtrl+Cを遮断し、著者の周到な考慮に感心せざるを得ない.
四、更なる改善:マウスクリック操作を遮断する
私はこのコードをテストする時に1つの問題に出会ったのはinput、select、textarea以外の要素をクリックする時すべてページを選択して、原文の作者は1つの簡単な方法を提供してコードの上で付加します.on('mousedown',false)は、マウスのクリックを遮断し、コードを使用して次のようになります.

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

しかし問題はまた来て、私は上述のコードを取った後に、input、select、textareaも正常になっていないことを発見して、mousedownの特性を遮蔽してすべての要素に応用したようです.今考え方を変えて、さっき私が提案した案と結びつけて、eventオブジェクトを判断して選択的な遮蔽を実現して、私はコードを以下のように修正します:

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

これでtextareaとinputはmousedownを制限しません.このコードを関数として抽出します.

 
  
function jQuery_isTagName(e, whitelists) { 
  
      e = $.event.fix(e); 
  
      var target = e.target || e.srcElement; 
  
      if (whitelists && $.inArray(target.tagName.toString().toUpperCase(), whitelists) == -1) { 
  
        return false; 
  
      } 
  
      return true; 
  
} 
  
 
  
$(':not(input,select,textarea)').disableSelection().on('mousedown', function(e) { 
  
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) { 
  
        e.preventDefault(); 
  
        return false; 
  
    } 
  
    return true; 
  
}); 
 

五、JQuery版の選択性遮蔽マウス右クリック禁止
右クリックメニューでは、次のように処理できます.

 
  
$(document).bind("contextmenu",function(e){ 
  
    if (!jQuery_isTagName(e, ['INPUT', 'TEXTAREA'])) { 
  
        e.preventDefault(); 
  
        return false; 
  
    } 
  
    return true; 
  
});