HTML DOM MenuItem 对象
MenuItem 对象
HTML DOM MenuItem 对象代表右键菜单中的一项菜单或子菜单。MenuItem 对象可以通过使用 document.createElement() 方法创建，然后使用 appendChild() 方法添加到 contextMenu 对象中。
MenuItem 对象的属性
MenuItem 对象具有下列属性：
- disabled：指示该选项是否应该被禁用。如果该项被禁用，则用户不能选择它。可选值为 true 或 false。
- label：用于显示列表项的文本。
- type：指示菜单项的类型。可选值为 “normal”（普通菜单项）, “separator”（分隔线）, “checkbox”（复选框）或 “radio”（单选按钮）。
MenuItem 对象的方法
MenuItem 对象具有下列方法：
- addEventListener()：用于向列表项添加事件监听器。
- removeEventListener()：用于从列表项中删除事件监听器。
如何创建和使用 MenuItem 对象
MenuItem 对象的创建和使用步骤如下：
- 使用 document.createElement() 方法创建 MenuItem 对象。
- 设置
disabled,label和type属性。 - 将 MenuItem 对象添加到 contextMenu 对象中。
// 创建一个 MenuItem 对象
const menuItem = document.createElement("menuitem");
// 设置menuItem的属性值
menuItem.disabled = false;
menuItem.label = "测试";
menuItem.type = "normal";
// 将MenuItem对象添加到contextMenu中
const contextMenu = document.getElementById("menu");
contextMenu.appendChild(menuItem);
示例
下面的示例创建一个右键菜单，其中包含两个菜单项 “测试1” 和 “测试2”：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MenuItem 对象</title>
</head>
<body>
<h1>右键单击下面区域进行测试</h1>
<p>请右键单击下面区域进行测试。</p>
<div id="menu" style="display: none;">
<menu>
<menuitem label="测试1"></menuitem>
<menuitem label="测试2"></menuitem>
</menu>
</div>
<script>
const menu = document.getElementById("menu");
window.addEventListener("contextmenu", function(e) {
e.preventDefault();
menu.style.display = "block";
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
}, false);
window.addEventListener("click", function() {
menu.style.display = "none";
}, false);
</script>
</body>
</html>
当用户右键单击页面时，将显示一个 context menu，其中包含两个菜单项 “测试1” 和 “测试2”。当用户点击页面时，该 context menu 将被隐藏。