要?jiǎng)?chuàng)建自定義右鍵上下文菜單，需按以下步驟操作：1. 使用contextmenu事件並調(diào)用e.preventDefault()阻止默認(rèn)菜單；2. 創(chuàng)建一個(gè)隱藏的div作為自定義菜單，通過(guò)JavaScript在右鍵點(diǎn)擊時(shí)獲取鼠標(biāo)位置，並將其顯示在該位置；3. 為每個(gè)菜單項(xiàng)添加點(diǎn)擊事件監(jiān)聽(tīng)器，根據(jù)data-action屬性執(zhí)行對(duì)應(yīng)操作，並在點(diǎn)擊後隱藏菜單；4. 可選地，檢查菜單是否超出視口邊界，若超出則調(diào)整其位置以確保完全可見(jiàn)。完成這些步驟後，即可實(shí)現(xiàn)一個(gè)純HTML、CSS和JavaScript的自定義右鍵菜單，且無(wú)需依賴(lài)任何框架，最終效果為用戶(hù)右鍵點(diǎn)擊時(shí)顯示自定義樣式菜單並支持功能交互，測(cè)試時(shí)需注意可訪(fǎng)問(wèn)性及鍵盤(pán)操作兼容性。

Creating a custom right-click context menu in HTML5 involves a few key steps: preventing the default browser context menu, capturing the right-click event, and displaying your own styled menu at the cursor position. Here's how you can do it:

1. Prevent the Default Context Menu

Right-clicking normally opens the browser's default context menu. To replace it, you need to stop that from happening using the contextmenu event.

 document.addEventListener('contextmenu', function(e) {
    e.preventDefault(); // Stop the default menu
});

2. Show Your Custom Menu

When the user right-clicks, display your custom menu. You can create a div element styled to look like a menu and position it where the mouse clicked.

HTML

 <div id="custom-menu" class="custom-menu">
    <div data-action="copy">Copy</div>
    <div data-action="paste">Paste</div>
    <div data-action="cut">Cut</div>
</div>

<p>Right-click anywhere in this area to see the custom menu.</p>

CSS

 .custom-menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    border-radius: 4px;
    padding: 8px 0;
    min-width: 120px;
    z-index: 1000;
}

.custom-menu div {
    padding: 8px 16px;
    cursor: pointer;
}

.custom-menu div:hover {
    background: #f0f0f0;
}

JavaScript

 const menu = document.getElementById('custom-menu');

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();

    // Position the menu at the mouse coordinates
    menu.style.top = `${e.clientY}px`;
    menu.style.left = `${e.clientX}px`;

    // Show the menu
    menu.style.display = 'block';
});

// Hide the menu when clicking elsewhere
document.addEventListener('click', function() {
    menu.style.display = 'none';
});

3. Add Functionality to Menu Items

You can assign actions to each menu item using data attributes or event listeners.

 Array.from(menu.children).forEach(item => {
    item.addEventListener('click', function() {
        const action = this.getAttribute('data-action');
        alert(`You selected: ${action}`);
        // Add real functionality here (eg, copy to clipboard)
        menu.style.display = 'none';
    });
});

Bonus: Keep Menu Inside Viewport

To prevent the menu from appearing off-screen, adjust its position if needed:

 const x = e.clientX;
const y = e.clientY;
const menuHeight = menu.offsetHeight;
const menuWidth = menu.offsetWidth;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

let top = y;
let left = x;

// Adjust if menu goes beyond bottom or right
if (top menuHeight > windowHeight) top = windowHeight - menuHeight;
if (left menuWidth > windowWidth) left = windowWidth - menuWidth;

menu.style.top = `${top}px`;
menu.style.left = `${left}px`;

That's it. You now have a fully functional, custom right-click context menu using plain HTML, CSS, and JavaScript — no frameworks needed. Just make sure to test accessibility and consider keyboard users if this is for a production site.

以上是如何在HTML5中創(chuàng)建自定義右鍵單擊上下文菜單？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！