今天突然有人跟我提到了HTML中如何自定義鼠標右鍵菜單，這里大概記錄一下吧，方便下次直接復制。免得還去看API文檔。
文章目錄
- HTML中自定義鼠標右鍵菜單
- 結果如下所示
- 可以稍微改一下鼠標懸浮到右鍵菜單時的樣式
- 結果如下所示
- 只在某個特定的div才可以顯示右鍵菜單
- 結果如下所示
- 在多個特定的div中都可以顯示右鍵菜單
- 結果如下所示
HTML中自定義鼠標右鍵菜單
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠標右鍵菜單示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}</style>
</head>
<body><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('復制')">復制</div><div class="context-menu-item" onclick="handleItemClick('粘貼')">粘貼</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>document.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默認右鍵菜單var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;});document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 點擊頁面其他地方隱藏菜單});function handleItemClick(itemName) {console.log(`用戶點擊了菜單項：${itemName}`);// 在此處添加實際的業務邏輯，如執行復制、粘貼或剪切操作switch (itemName) {case '復制':// 執行復制操作...break;case '粘貼':// 執行粘貼操作...break;case '剪切':// 執行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 點擊菜單項后隱藏菜單}
</script></body>
</html>
結果如下所示
在這個例子中，當用戶在網頁上右鍵點擊時，會顯示一個自定義菜單。并在點擊菜單項時執行相應的函數。這個就要根據自己具體的實際場景中實現了。
可以稍微改一下鼠標懸浮到右鍵菜單時的樣式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠標右鍵菜單示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}.context-menu-item:hover {background-color: #e6f7ff;}</style>
</head>
<body><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('復制')">復制</div><div class="context-menu-item" onclick="handleItemClick('粘貼')">粘貼</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>document.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默認右鍵菜單var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;});document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 點擊頁面其他地方隱藏菜單});function handleItemClick(itemName) {console.log(`用戶點擊了菜單項：${itemName}`);// 在此處添加實際的業務邏輯，如執行復制、粘貼或剪切操作switch (itemName) {case '復制':// 執行復制操作...break;case '粘貼':// 執行粘貼操作...break;case '剪切':// 執行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 點擊菜單項后隱藏菜單}
</script></body>
</html>
結果如下所示
只在某個特定的div才可以顯示右鍵菜單
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠標右鍵菜單示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}.context-menu-item:hover {background-color: #f5f5f5;}</style>
</head>
<body><div id="targetDiv" style="width: 300px; height: 300px; background-color: #eee;">右鍵點擊我顯示自定義菜單
</div><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('復制')">復制</div><div class="context-menu-item" onclick="handleItemClick('粘貼')">粘貼</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>const targetDiv = document.getElementById('targetDiv');targetDiv.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默認右鍵菜單if (e.target === targetDiv) { // 只有當點擊的目標是目標div時才顯示菜單var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;}});document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 點擊頁面其他地方隱藏菜單});function handleItemClick(itemName) {console.log(`用戶點擊了菜單項：${itemName}`);// 在此處添加實際的業務邏輯，如執行復制、粘貼或剪切操作switch (itemName) {case '復制':// 執行復制操作...break;case '粘貼':// 執行粘貼操作...break;case '剪切':// 執行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 點擊菜單項后隱藏菜單}
</script></body>
</html>
結果如下所示
在這個例子中，右鍵菜單只會出現在具有ID為targetDiv的div元素上。當用戶在其他位置右鍵點擊時，不會顯示自定義菜單。
在多個特定的div中都可以顯示右鍵菜單
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠標右鍵菜單示例</title><style>.context-menu {display: none;position: absolute;background-color: #fff;border: 1px solid #ccc;min-width: 100px;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);z-index: 999;}.context-menu-item {padding: 5px 10px;cursor: pointer;}.context-menu-item:hover {background-color: #24d0d6;}</style>
</head>
<body><div id="targetDiv1" class="target-divs" style="width: 300px; height: 300px; background-color: #eee;">右鍵點擊我顯示自定義菜單
</div><div id="targetDiv2" class="target-divs" style="width: 300px; height: 300px; background-color: #ddd;">右鍵點擊我顯示自定義菜單
</div><div id="contextMenu" class="context-menu"><div class="context-menu-item" onclick="handleItemClick('復制')">復制</div><div class="context-menu-item" onclick="handleItemClick('粘貼')">粘貼</div><div class="context-menu-item" onclick="handleItemClick('剪切')">剪切</div>
</div><script>const targetDivs = document.getElementsByClassName('target-divs');for (const div of targetDivs) {div.addEventListener('contextmenu', function (e) {e.preventDefault(); // 阻止默認右鍵菜單var menu = document.getElementById('contextMenu');menu.style.display = 'block';menu.style.left = `${e.pageX}px`;menu.style.top = `${e.pageY}px`;});}document.addEventListener('click', function () {document.getElementById('contextMenu').style.display = 'none'; // 點擊頁面其他地方隱藏菜單});function handleItemClick(itemName) {console.log(`用戶點擊了菜單項：${itemName}`);// 在此處添加實際的業務邏輯，如執行復制、粘貼或剪切操作switch (itemName) {case '復制':// 執行復制操作...break;case '粘貼':// 執行粘貼操作...break;case '剪切':// 執行剪切操作...break;}document.getElementById('contextMenu').style.display = 'none'; // 點擊菜單項后隱藏菜單}
</script></body>
</html>
結果如下所示
在這個例子中，我們首先通過類名target-divs獲取所有需要添加右鍵菜單功能的div元素，然后遍歷這個集合，為每個元素添加右鍵菜單事件監聽器。這樣，在任何具有target-divs類名的div上右鍵點擊時都會顯示自定義菜單。
和with是干嘛的)
（十）)
![[藍橋杯 2023 省 B] 冶煉金屬](http://pic.xiahunao.cn/[藍橋杯 2023 省 B] 冶煉金屬)
)
