ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryを使用して画像の右クリックメニューを無効にする方法について話しましょう

jqueryを使用して画像の右クリックメニューを無効にする方法について話しましょう

PHPz
リリース: 2023-04-10 10:30:19
オリジナル
829 人が閲覧しました

Web ページ上の一部の画像の右クリック メニューを無効にしたいユーザーは、JQuery コードを使用してこれを実現できます。この記事では、JQueryを使用して画像の右クリックメニューを無効にする方法をいくつか紹介します。

まず、JQuery ライブラリをインポートする必要があります。 HTML の head タグに、次のコードを追加します:

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
ログイン後にコピー

次に、右クリック メニューを無効にする必要がある画像の ID またはクラスを見つける必要があります。無効にするのは myImage です。 JQuery では、右クリック メニューを無効にするコードは次のようになります。

$("#myImage").on("contextmenu", function() {
return false;
});
ログイン後にコピー

同様に、無効にする必要があるのが画像のグループのクラスである場合、コードは次のようになります。

$(".myImage").on("contextmenu", function() {
return false;
});
ログイン後にコピー

First このコード行では、JQuery のセレクターを使用して、特定の ID またはクラスを持つ画像を選択します。次に、JQuery で「contextmenu」イベントを適用し、選択した画像に割り当てます。この例では、return false を使用して、表示されるはずの右クリック メニューをキャンセルするようにブラウザに指示します。イベント名「contextmenu」は、他のイベント名の書き方と異なり、小文字で書かれていることに注意してください。

最後に、JQuery コード ブロック全体の外側で、ready 関数内にコードを配置して、ドキュメントのロード後にコードが実行されるようにする必要があります。コードは次のように記述できます。

$(document).ready(function() {
  $("#myImage").on("contextmenu", function() {
    return false;
  });
});
ログイン後にコピー

ここでは、jQuery の ready() 関数に必要なパラメータとして匿名関数を使用します。この関数は、ドキュメント内のすべての要素が読み込まれた後に実行されます。

要約すると、画像の右クリック メニューを無効にする JQuery のコードは次のようになります。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(&quot;#myImage&quot;).on(&quot;contextmenu&quot;, function() {
    return false;
  });
});
</script>
ログイン後にコピー

HTML コードで、myImage を画像の ID またはクラスに置き換えます。右クリックメニューを無効にしたい場合、つまり「できます」。 JQuery を使用して、特定の画像の右クリック メニューを無効にする方法を学びました。この記事がお役に立てば幸いです。

以上がjqueryを使用して画像の右クリックメニューを無効にする方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート