ChatGPT 問答00004 html 自定義右鍵
要在 HTML 頁面中自定義右鍵菜單，可以使用 JavaScript 實現。下面是一個簡單的例子：
首先，在 <head> 標簽中插入以下代碼來禁用默認的瀏覽器右鍵菜單：
<script>
// 禁用右鍵菜單
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
</script>
然后，在 <body> 標簽中插入以下代碼來創建并顯示自定義的右鍵菜單：
<div id="custom-menu" style="display: none;">
<ul>
<li><a href="#">菜單項1</a></li>
<li><a href="#">菜單項2</a></li>
<li><a href="#">菜單項3</a></li>
</ul>
</div>
<script>
var menu = document.getElementById('custom-menu');
// 右鍵點擊事件處理
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 顯示自定義菜單
menu.style.display = 'block';
menu.style.left = event.pageX + 'px';
menu.style.top = event.pageY + 'px';
});
// 單擊頁面任意位置隱藏菜單
document.addEventListener('click', function () {
menu.style.display = 'none';
});
</script>
這個例子創建了一個帶有三個菜單項的自定義右鍵菜單，并在右鍵點擊時顯示菜單。當在頁面的其他位置單擊時，菜單將隱藏起來。你可以根據需要修改菜單項的內容和樣式。
為夢想不止不休！
浙公網安備 33010602011771號