<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="const"></div>
<div id="menu">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
<script>
// 点击其他不在的区域触发事件
document.addEventListener('click', () => {
document.getElementById('menu').style.display = 'none'
})
document.getElementById('const').oncontextmenu = function(e) {
// 禁止系统右击菜单
e.preventDefault()
document.getElementById('menu').style.display = 'block'
const menu = document.querySelector('#menu')
menu.style.left = window.event.clientX + 20 + 'px'
menu.style.top = window.event.clientY + 'px'
}
</script>
<style>
#const {
width: 1000px;
height: 500px;
background-color: antiquewhite;
}
#menu {
display: none;
position:fixed;
background-color: #ffffff;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>
</body>
</html>
11-20
11-22
734
734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
