右键上下文菜单

通过JavaScript和CSS创建自定义右键上下文菜单。

示例代码：

HTML:

<div id="myContextMenu"> 
    <ul> 
        <li><a href="#">菜单1</a></li> 
        <li><a href="#">菜单2</a></li> 
        <li><a href="#">菜单3</a></li> 
    </ul> 
</div> 

<div id="myElement"> 
    右键点击此处显示菜单 
</div>

CSS:

#myContextMenu { 
    display: none; 
    position: absolute; 
    background-color: #fff; 
    border: 1px solid #000; 
    padding: 5px; 
} 

#myContextMenu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#myContextMenu li { 
    padding: 5px; 
} 

#myContextMenu li:hover { 
    background-color: #eee; 
} 

JavaScript:

var myContextMenu = document.getElementById("myContextMenu"); 
var myElement = document.getElementById("myElement"); 

myElement.addEventListener("contextmenu", function(e) { 
    e.preventDefault(); 
    myContextMenu.style.display = "block"; 
    myContextMenu.style.left = e.pageX + "px"; 
    myContextMenu.style.top = e.pageY + "px"; 
}); 

document.addEventListener("click", function() { 
    myContextMenu.style.display = "none"; 
}); 

解释：

以上代码演示了如何创建一个自定义的右键上下文菜单。当用户右键单击id为“myElement”的元素时，它会触发一个“contextmenu”事件，并防止默认的右键单击上下文菜单出现。而自定义的右键上下文菜单包含了id为“myContextMenu”的元素，它在显示时会显示在鼠标右键点击的位置，并且当用户单击页面上任意位置时会自动隐藏。