oncontextmenu如何設置菜單項

要設置oncontextmenu中的菜單項，可以通過以下步驟進行：

創建一個菜單項列表，其中包含您想要顯示在右鍵菜單中的所有選項。
在oncontextmenu事件處理程序中，阻止默認的上下文菜單彈出，并在指定位置顯示您自定義的菜單項。
當用戶點擊菜單項時，執行相應的操作。

下面是一個簡單的示例代碼：

<!DOCTYPE html>
<html>
<body>

<div oncontextmenu="showContextMenu(event)">
    Right click here to see the context menu
</div>

<div id="contextMenu" style="display: none; position: absolute; background: #f9f9f9; border: 1px solid #ccc; padding: 5px;">
    <div onclick="alert('Option 1 clicked')">Option 1</div>
    <div onclick="alert('Option 2 clicked')">Option 2</div>
    <div onclick="alert('Option 3 clicked')">Option 3</div>
</div>

<script>
function showContextMenu(event) {
    event.preventDefault();
    
    var contextMenu = document.getElementById('contextMenu');
    contextMenu.style.display = 'block';
    contextMenu.style.left = event.clientX + 'px';
    contextMenu.style.top = event.clientY + 'px';
    
    document.addEventListener('click', function hideContextMenu() {
        contextMenu.style.display = 'none';
        document.removeEventListener('click', hideContextMenu);
    });
}
</script>

</body>
</html>

在上面的示例中，當用戶右鍵點擊div元素時，會顯示一個自定義的上下文菜單，其中包含三個選項。當用戶點擊任何一個選項時，會彈出一個警告框顯示響應的選項被點擊。

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

最新問答

相關標簽