首頁 > web前端 > css教學 > 如何將事件綁定到滑鼠右鍵並隱藏瀏覽器的上下文選單?

如何將事件綁定到滑鼠右鍵並隱藏瀏覽器的上下文選單?

Patricia Arquette
發布: 2024-12-02 14:40:14
原創
956 人瀏覽過

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

將事件綁定到滑鼠右鍵而不啟動瀏覽器上下文選單

問題:

如何在以下情況下執行特定操作右鍵單擊,同時防止預設瀏覽器上下文功能表出現?

答案:

解決方案 1:使用 oncontextmenu 事件處理程序

jQuery 不提供內建事件處理程序。相反,您可以使用以下方法:

$(document).ready(function() {
  document.oncontextmenu = function() { return false; };
});
登入後複製

這透過取消 DOM 元素中的 oncontextmenu 事件來停用瀏覽器上下文選單。

解決方案2:使用jQuery mousedown 事件Handler

您可以使用jQuery 捕獲mousedown 事件並確定哪個按鈕是Pressed:

$(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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板