image.png
<style>
* {
margin: 0;
padding: 0;
}
a {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
ul {
text-align: center;
}
ul li {
list-style: none;
/* margin: 10px 0; */
height: 30px;
line-height: 30px;
text-align: center;
border: 1px solid black;
background: white;
transition: background .3s linear;
}
ul li:hover {
background: gray;
}
#rightMenu {
display: none;
position: absolute;
/* width: 100px; */
/* */
}
</style>
<body>
<a href="http://www.baidu.com">去百度</a>
<div id="rightMenu">
<ul>
<li>Cut</li>
<li>Copy</li>
<li>Paste</li>
<li>Run</li>
<li>Definition</li>
</ul>
</div>
<script>
var myA = document.getElementsByTagName("a")[0];
//！标准
// myA.onclick = function () {
// return false;
// }
//标准
// function deEvent(e) {
// var evE = e || event;
// evE.preventDefault();
// evE.returnValue = false; //IE下阻止默认事件
// }
//阻止鼠标右键默认行为
// document.oncontextmenu = function () {
// return false;
// }
var myMenu = document.getElementsByTagName("div")[0];
window.onload = function () {
document.oncontextmenu = function (e) {
var e = e || window.event;
e.preventDefault();
e.returnValue = false;
myMenu.style.left = e.clientX + 'px';
myMenu.style.top = e.clientY + 'px';
myMenu.style.display = "block";
myMenu.style.width = "100px";
myMenu.style.height = "160px";
myMenu.
console.log(e.clientX);
console.log(e.clientY);
return false ;
}
document.onclick = function () {
myMenu.style.display = 'none'; //隐藏菜单
}
}
</script>
