在打开事件中获取contextmenu对象,可以通过以下步骤实现:
<ul id="contextMenu">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
这将创建一个包含三个菜单项的无序列表,id为"contextMenu"。
function openContextMenu(event) {
event.preventDefault(); // 阻止默认右键菜单的显示
var contextMenu = document.getElementById("contextMenu");
contextMenu.style.display = "block";
contextMenu.style.left = event.clientX + "px";
contextMenu.style.top = event.clientY + "px";
}
在上述代码中,event.clientX和event.clientY分别表示鼠标事件发生时鼠标的水平和垂直坐标。通过将contextmenu的display属性设置为"block",可以将其显示出来,并使用鼠标坐标设置其位置。
var targetElement = document.getElementById("targetElement");
targetElement.addEventListener("contextmenu", openContextMenu);
在上述代码中,"targetElement"表示你希望在其上显示右键菜单的HTML元素的id。通过使用addEventListener()方法,将"contextmenu"事件与openContextMenu函数进行绑定。
这样,当用户在目标元素上右键点击时,将触发"contextmenu"事件,进而调用openContextMenu函数并显示右键菜单。
领取专属 10元无门槛券
手把手带您无忧上云