jQueryを使用して画像上で右クリックを無効にする方法
私の以前の記事の1つでは、CTRL+U、CTRL+C、およびWebページ上で右クリックを無効にする方法についてすでに説明しました。
ブロガーの友人やクライアントから、自分のサイト上の写真を保護し、人々がダウンロードしたり保存したりするのを防ぐための要求をよく受けます。 それらのほとんどは、ユーザーが画像を右クリックして画像を保存したり、Photoshopのようなコンピュータやアプリケーションに画像をドラッグしたりしないよ
さて、なぜあなたはあなたのブログやウェブサイトの写真を右クリックしてドラッグを無効にする必要がありますか？
あなたがこれをする特別な理由はありません。 個人的には、ユーザーエクスペリエンスの品質が低下するため、このスクリプトを使用して右クリック画像を無効にすることはお勧めしません。 また、それは多くのユーザーに非常に迷惑になります。 あなたのウェブサイトの主な目的はあなたのユーザーに価値を提供することであることを覚えなさい。
jQueryとCSSセレクタに少し慣れていても、スクリプトを編集して、任意の種類のHTML要素を右クリックしてドラッグすることを無効または有効にするこ あなたは、特定のコンポーネントの特別なクラスを持つ画像上で右クリックを無効にすることができます。
スクリプトを追加するには？
あなたのブログにこのスクリプトを追加したい場合は、ここでは、画像上のドラッグ上の右クリックを無効にするために使用できるスクリプトです。 このスクリプトはjQueryに基づいて動作しますが、条件はあなたのブログにjQueryプラグインがインストールされている必要があるということです。 そうでない場合は、ブログやウェブサイトの</head>タグの上に以下のjQueryプラグインを追加してください。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>今、それはあなたのブログのウェブサイト上の画像を右クリックしてドラッグを無効にしますjQueryスクリプトを追加する時間です。 あなたがしなければならないのは、あなたのブログ/ウェブサイトのHTMLの</body>タグの上に以下のスクリプトを追加することだけです。
<script type="text/javascript">$(document).ready(function(){// this part disables the right click$('img').on('contextmenu', function(e) {return false;});//this part disables dragging of image$('img').on('dragstart', function(e) {return false;});});</script>それだけです。 今すぐあなたのウェブサイトを訪問し、任意の画像を右クリックして、このスクリプトがどのように動作するかを見てみてください！
それを行う別の方法はありますか？
さらに、Javascriptを使用して画像を右クリックを無効にするために使用できる別の方法があります（はい、Javascript。 JQueryではありません）。 上記のjQueryスクリプトをブログに追加したくない場合や、右クリックだけを無効にしてドラッグしたくない場合は、別の方法があります。
ただし、上記のスクリプトからドラッグ無効化機能を削除することもできますが、ブログやウェブサイトのHTMLで</head>タグの前に貼り付ける必要があ
<script type='text/javascript'>//<!]></script>あなたのために推薦される:
CSSを使用してwebページ内のテキストの選択を無効にする方法