イベントをマウスの右クリックにバインドし、ブラウザのコンテキストメニューを非表示にする方法-CSSチュートリアル-php.cn

ブラウザのコンテキストメニューをアクティブにせずにマウスの右クリックにイベントをバインドする

ホームページ

ウェブフロントエンド

CSSチュートリアル

イベントをマウスの右クリックにバインドし、ブラウザのコンテキストメニューを非表示にする方法

Patricia Arquette

Dec 02, 2024 pm 02:40 PM

How to Bind an Event to a Right Mouse Click and Suppress the Browser's Context Menu?

ブラウザのコンテキストメニューをアクティブにせずにマウスの右クリックにイベントをバインドする

質問:

次の場合に特定のアクションを実行する方法デフォルトのブラウザのコンテキストメニューが表示されないようにしながら、右クリックします。

答え:

解決策 1: oncontextmenu イベントハンドラーを使用する

jQuery は組み込みの oncontextmenu を提供しませんイベントハンドラ。代わりに、次のアプローチを使用できます。

$(document).ready(function() {
  document.oncontextmenu = function() { return false; };
});

ログイン後にコピー

これにより、DOM 要素の oncontextmenu イベントがキャンセルされて、ブラウザーのコンテキストメニューが無効になります。

解決策 2: jQuery の Mousedown イベントを使用するHandler

jQuery を使用してマウスダウンイベントをキャプチャし、どのボタンが押されたかを判断できます。押された:

$(document).ready(function() {
  $(document).mousedown(function(e) {
    if (e.button == 2) {
      // Right mouse button clicked
      alert('Right mouse button!');
      return false;
    }
    return true;
  });
});

ログイン後にコピー

このアプローチは、コンテキストメニューの無効化とマウスの右クリックの検出を組み合わせたものです。

デモ:

次のことができます。次のコード例を開いて右クリックし、上記のソリューションをテストします:

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(document).mousedown(function(e) {
        if (e.button == 2) {
          alert('Right mouse button!');
        }
      });
    });
  </script>
</head>
<body>
  <h1>Test Right Mouse Click Event</h1>
</body>
</html>

ログイン後にコピー

以上がイベントをマウスの右クリックにバインドし、ブラウザのコンテキストメニューを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。