97 lines
2.5 KiB
HTML
97 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>右键菜单</title>
|
||
<style>
|
||
body {
|
||
height: 100vh;
|
||
}
|
||
|
||
body,
|
||
ul,
|
||
li {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
ul {
|
||
width: 152px;
|
||
border-radius: 6px;
|
||
box-shadow: 2px 2px 9px #d7d7d7;
|
||
display: none;
|
||
position: fixed;
|
||
}
|
||
|
||
li {
|
||
height: 40px;
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
line-height: 40px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<ul>
|
||
<li>新建文件夹</li>
|
||
<li>上传文件</li>
|
||
<li>上传文件夹</li>
|
||
<li>刷新网页</li>
|
||
</ul>
|
||
</body>
|
||
<script>
|
||
$("body").oncontextmenu = function (e) {
|
||
//设置在网页上的右击事件 并且（e）代表的是右击事件的形参
|
||
e.preventDefault();
|
||
//取消网页上自带的右击事件
|
||
var { x, y } = e;
|
||
var { w, h } = document.body;
|
||
//定义两个数组一个存放当前右击的x轴 y轴坐标
|
||
//另一个存放页面的宽和高 注意：要给boby设置高度
|
||
if (w - x < 152 && h - y < 160) {
|
||
//如果屏幕宽度减去当前右击x轴坐标小于我们所定义元素宽度
|
||
// 并且屏幕高度减去当前右击y轴坐标小于我们所定义元素高度时
|
||
$("ul").style = `
|
||
top: ${y - 160}px;
|
||
left: ${x - 152}px;
|
||
display: block;
|
||
`
|
||
//我们所定义的元素所在位置为元素自身所在的x,y轴减去元素本身的宽高
|
||
//也就是当在右下角点击时弹窗在左上
|
||
} else if (w - x < 152) {
|
||
$("ul").style = `
|
||
top: ${y}px;
|
||
left: ${x - 152}px;
|
||
display: block;
|
||
`
|
||
//
|
||
} else if (h - y < 160) {
|
||
$("ul").style = `
|
||
top: ${y - 160}px;
|
||
left: ${x}px;
|
||
display: block;
|
||
`
|
||
} else {
|
||
$("ul").style = `
|
||
top: ${y}px;
|
||
left: ${x}px;
|
||
display: block;
|
||
`
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
</script>
|
||
|
||
</html> |