在 JavaScript 中禁止在網頁上點選右鍵
-
在 JavaScript 中使用 HTML DOM
addEventListener()方法禁用對網頁的右鍵單擊 -
在 JavaScript 中使用帶有
contextmenu事件的preventDefault()方法禁用對網頁的右鍵單擊
在建立部落格、網站或網頁時，我們有時需要禁用右鍵單擊按鈕。
本文將討論一些我們可以用來禁用右鍵單擊的最常見和最有益的方法。這可能無法完全保護我們的資料，但會在一定程度上提供安全性。
要禁用頁面上的右鍵單擊，我們可以使用 JavaScript 的 HTML DOM addEventLIstener() 和 preventDefault() 方法。
在 JavaScript 中使用 HTML DOM addEventListener() 方法禁用對網頁的右鍵單擊
使用 addEventListener() 方法將事件處理程式附加到文件。
語法：
document.addEventListener(event, function, useCapture)
引數：
-
event：（必需）它指定字串，即事件的名稱。 -
function：（必需）當事件發生時，它指示要執行的函式。當事件發生時，事件物件作為第一個引數提供給函式。定義的事件決定了事件物件的型別。例如，MouseEvent 物件代表
click事件。 -
useCapture：（可選）它指定是否應該在捕獲階段或冒泡階段執行事件的布林值。 -
true：它指定事件應該在捕獲階段執行。 -
false：它指示事件在冒泡階段執行。
在 JavaScript 中使用帶有 contextmenu 事件的 preventDefault() 方法禁用對網頁的右鍵單擊
如果可以取消該事件，則此函式將取消該事件，從而禁用該事件的預設操作。例如，單擊提交按鈕將阻止提交表單。
語法：
event.preventDefault()
它不接受任何引數。
此示例將通過為 contextmenu 事件新增事件偵聽器並呼叫 preventDefault() 方法來禁用右鍵單擊。
這段程式碼的作用是防止彈出右鍵選單。每當發生右鍵單擊事件時，preventDefault() 函式會禁用右鍵單擊。
由於使用 preventDefault() 函式禁用了 contextmenu 事件（這是發生右鍵單擊時的預設功能）。
當我們右鍵單擊時，此程式碼還會顯示一條訊息右鍵單擊已禁用。
<html>
<head>
<title>
Disable right click on my web page
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:blue;" >
BLOCTAKSolutions
</h1>
<p id = "GFG_UP" style = "font-size: 20px; font-weight: italic;">
</p>
<button onclick = "gfg_Run()">
Disable
</button>
<p id = "GFG_DOWN" style =
"color:blue; font-size: 50px; font-weight: italic;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = " How to disable right click";
function gfg_Run() {
document.addEventListener('contextmenu',
event => event.preventDefault());
el_down.innerHTML = "Right Click is disabled";
}
</script>
</body>
</html>
單擊禁用按鈕之前的輸出：
.webp)
單擊禁用按鈕後的輸出：
.webp)
該程式的另一個示例是為 contextmenu 事件新增一個事件偵聽器，並使用 preventDefault() 方法來禁用右鍵單擊影象，因為我們並不總是希望使用者儲存影象。
<html>
<head>
<title>
Disable right click on my web page
</title>
<style>
img {
border: 1px solid;
}
</style>
</head>
<body style = "text-align:center;">
<h1 style = "color:blue;" >
BLOCTAKSolutions
</h1>
<img src = ""/>
<p id = "GFG_UP" style = "font-size: 20px; font-weight: italic;">
</p>
<button onclick = "gfg_Run()">
Disable
</button>
<p id = "GFG_DOWN" style =
"color: blue; font-size: 50px; font-weight: italic;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"How to disable right click on image by button click using JavaScript";
function gfg_Run() {
document.addEventListener("contextmenu",
function(e) {
if (e.target.nodeName === "IMG") {
e.preventDefault();
}
}, false);
el_down.innerHTML = "Right click is disabled on the image";
}
</script>
</body>
</html>
單擊禁用按鈕之前的輸出：
-and-preventDefault().webp)
單擊禁用按鈕後的輸出：
-and-preventDefault().webp)