デフォルトのコンテキスト メニューを回避しながら右クリック機能をエミュレートするにはどうすればよいですか?

マウスの右クリック イベント処理のエミュレーション

カスタムの右クリック機能を実装しようとすると、ブラウザのコンテキスト メニューが不便になることがあります。コンテキスト メニューを無効にすると、ユーザー エクスペリエンスがより合理化されます。ただし、マウスの右クリックでカスタム アクションをトリガーする方法という問題も生じます。

jQuery の binding() メソッドを使用する

最初のアプローチの 1 つは、次のような方法です。イベント ハンドラーを「contextmenu」イベントにアタッチするための jQuery の binding() メソッド:

$(document).bind("contextmenu",function(e){
    $('.alert').fadeToggle();
    return false;
});

Thisコードはブラウザのコンテキスト メニューを無効にしますが、マウスの右クリックでカスタム アクションをトリガーできません。

document.oncontextmenu を使用した代替アプローチ

マウスの右クリックを正常に処理するには、 JavaScript の document.oncontextmenu プロパティを使用してコンテキスト メニューを無効にし、別途使用してマウス ダウン イベントをキャプチャする必要があります。 jQuery:

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

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

1. コンテキスト メニューを無効にする: document.oncontextmenu = function() {return false;} ブラウザのコンテキスト メニューを無効にします。
2. マウスダウンイベントのキャプチャ: $(document).mousedown(function(e){ ...
3. 右マウス ボタンの識別: e.button == 2 は、右マウス ボタンが押されたかどうかを確認します。
4. トリガー カスタムアクション: マウスの右ボタンを押すと、コンテキストの代わりにアラートが表示されます。 menu.

このアプローチは、ブラウザーのコンテキスト メニューが表示されないようにしながら、マウスの右クリック イベントを効果的に処理します。

以上がデフォルトのコンテキスト メニューを回避しながら右クリック機能をエミュレートするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。