<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #menu { height: 200px; width: 50px; border: 1px solid gra ...
<!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>
