首页 > 代码库 > 实现右键自定义菜单

实现右键自定义菜单

2024-08-24 20:16:06   222人阅读

<style>p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 } p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 } p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 } p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 } p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px } p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 } p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 } p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 } p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 } p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #698906 } span.s1 { color: #4f5d66 } span.s2 { color: #2b7ec3 } span.s3 { color: #48565d } span.s4 { color: #289c97 } span.s5 { color: #d74200 } span.s6 { color: #000000 } span.s7 { color: #060606 } span.s8 { color: #929151 } span.s9 { color: #ad42ef } span.s10 { color: #698906 } span.s11 { color: #4a8a01 } span.s12 { color: #d16400 } span.s13 { color: #4663cc } span.s14 { color: #b58a00 } span.s15 { color: #e48b00 } span.Apple-tab-span { white-space: pre }</style>

<!DOCTYPE html>

<html>

 

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#menu {

height: 200px;

width: 50px;

border: 1px solid gray;

background-color: antiquewhite;

padding: 10px;

display: none;

position: absolute;

}

 

ul,

li {

margin: 0;

padding: 0;

list-style-type: none;

line-height: 40px;

}

</style>

</head>

 

<body>

<div id="menu">

<ul>

<li>复制</li>

<li>粘贴</li>

<li>运行</li>

<li>工具</li>

<li>帮助</li>

</ul>

</div>

</body>

<script type="text/javascript">

var menu = document.getElementById("menu");

document.oncontextmenu = function(ev) {

var oEvent = ev || event;

//自定义的菜单显示

menu.style.display = "block";

//让自定义菜单随鼠标的箭头位置移动

menu.style.left = oEvent.clientX + "px";

menu.style.top = oEvent.clientY + "px";

//return false阻止系统自带的菜单，

//return false必须写在最后，否则自定义的右键菜单也不会出现

return false;

 

}

//实现点击document，自定义菜单消失

document.onclick = function() {

 

menu.style.display = "none";

}

</script>

 

</html>

实现右键自定义菜单


联系
我们