如何使用 JavaScript 停用網站的右鍵點選?


要使用 JavaScript 停用網站的右鍵點選,您可以使用 contextmenu 事件來取消右鍵點選的預設行為。

contextmenu 事件是 DOM 事件,當用戶在使用者介面中的元素上右鍵點選時觸發。它是一種滑鼠事件,類似於 click 事件,但它是特定於右鍵點選的。

在 JavaScript 中,您可以使用 addEventListener 方法將 contextmenu 事件監聽器附加到元素。每當在元素上觸發 contextmenu 事件時,都會呼叫事件監聽器函式。

以下是如何在 JavaScript 中使用 contextmenu 事件的示例:

const element = document.getElementById("my-element"); 
element.addEventListener("contextmenu", (event) => { // do something when the context menu is shown });

在事件監聽器函式中,事件物件包含有關 contextmenu 事件的資訊,例如滑鼠的位置和被點選的元素。您可以使用這些資訊來自定義上下文選單的行為或執行其他操作。

例如,您可以使用 event.preventDefault 方法取消右鍵點選的預設行為,並改為顯示自定義上下文選單:

const element = document.getElementById("my-element"); 
element.addEventListener("contextmenu", (event) => { event.preventDefault(); // show a custom context menu });

步驟

要使用 JavaScript 在網頁上停用右鍵點選上下文選單,您可以按照以下步驟操作

  • 步驟 1 - 建立一個包含 script 元素的 HTML 頁面。

  • 步驟 2 - 在 script 元素中,使用 addEventListener 方法將事件監聽器函式附加到 contextmenu 事件。

  • 步驟 3 - 在事件監聽器函式中,使用 preventDefault 方法取消事件的預設操作。

示例 1

在本例中,我們使用“contextmenu”事件停用右鍵點選。

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
</head>
<body>
   <h2>Disabling right-clicking on a webpage using JavaScript</h2>
   <p> Right Click is disabled</p>
   <script>
      document.addEventListener("contextmenu", (event) => {
         event.preventDefault();
      });
   </script>
</body>
</html>

在本例中,JavaScript 程式碼使用 addEventListener 方法將 contextmenu 事件監聽器附加到 document 物件。事件監聽器函式透過呼叫事件物件的 preventDefault 方法來取消右鍵點選的預設行為。這將停用頁面上的右鍵點選並阻止上下文選單出現。

注意此方法僅在支援 contextmenu 事件的瀏覽器中有效,並且不會阻止使用者使用其他方法(例如使用鍵盤快捷鍵或使用觸控式螢幕裝置上的上下文選單按鈕)訪問上下文選單。同樣重要的是要考慮停用右鍵點選的可用性影響,因為它可能會讓依賴此功能執行諸如複製和貼上文字或儲存影像等任務的使用者感到沮喪。您應僅在特定用例需要時才使用此功能。

還有其他幾種方法可以使用 JavaScript 停用網站的右鍵點選

示例 2

使用 oncontextmenu 屬性

您可以使用 oncontextmenu 屬性將 JavaScript 函式附加到觸發 contextmenu 事件時將呼叫的元素。如果您只需要取消右鍵點選的預設行為並且不需要執行任何其他操作,這可能是一種處理 contextmenu 事件的便捷方法。

以下是如何使用 oncontextmenu 屬性的示例:

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
</head>
<body>
   <h2>Disabling right-clicking on a webpage</h2>
   <div oncontextmenu="return false;">
      Right-clicking on this element is disabled.
   </div>
</body>
</html>

在本例中,oncontextmenu 屬性用於將 JavaScript 函式附加到 div 元素,該函式在觸發 contextmenu 事件時返回 false。這將取消右鍵點選的預設行為並阻止上下文選單出現。

更新於:2022-12-28

21K+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.