如何將事件綁定到滑鼠右鍵並隱藏瀏覽器的上下文選單？-css教學-PHP中文網

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

首頁

web前端

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 不提供內建事件處理程序。相反，您可以使用以下方法：

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn