104 lines
3.0 KiB
HTML
104 lines
3.0 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>Document</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>
|
||
<!-- 1 获取事件； 2 绑定事件； 3 事件处理函数。
|
||
|
||
（阻止默认事件：e.preventDefault();） （阻止事件冒泡（子元素冒泡）：e.stopPropagation()）
|
||
|
||
该事件：首先，阻止网页默认的右键菜单，并将自制菜单固定并隐藏在网页上；
|
||
其次，(e)监听鼠标的点击位置（x轴和y轴），通过判断右击菜单和vh、vw的距离来动态调整右击菜单。
|
||
甲方需求：自制一个右击菜单，然后通过获取鼠标点击的位置，给网页动态的加上右击菜单。 -->
|
||
<script>
|
||
// 返回值
|
||
function $(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
// 返回数组
|
||
function _(className) {
|
||
return document.querySelectorAll(className)
|
||
}
|
||
|
||
var body = $('body')
|
||
var ul = $('ul')
|
||
// console.log(1);
|
||
|
||
// 判断给谁绑定事件：菜单在用户可视范围区域都能打开，所以不可能是给ul绑定，vh＋vw=body。因此，是给body绑定右击菜单事件
|
||
// .oncontextmenu在用户点击鼠标右键打开上下文菜单时触发
|
||
body.oncontextmenu = function(e){
|
||
e.preventDefault();
|
||
var { x , y } = e
|
||
// console.log("x , y",x,y);
|
||
var { clientWidth , clientHeight } = document.body
|
||
// console.log('1,2',clientWidth , clientHeight);
|
||
// 判断：首先判断菜单会出现的情况，xy轴都不够即在屏幕角落，然后是x或者y单方面不够等三个特殊情况以及正常情况。
|
||
// 菜单长宽160，152；右边框：clientWidth-x<菜单宽度152，就放左边——怎么放：x-152其他同理
|
||
if(clientWidth - x < 152 && clientHeight - y < 160){
|
||
ul.style =
|
||
`left:${x-152}px;
|
||
top:${y - 160}px;
|
||
display:block`
|
||
}else if(clientWidth - x < 152){
|
||
ul.style =
|
||
`left:${x-152}px;
|
||
top:${y}px;
|
||
display:block`
|
||
}else if(clientHeight - y < 160){
|
||
ul.style =
|
||
`left:${x}px;
|
||
top:${y - 160}px;
|
||
display:block`
|
||
}else{
|
||
ul.style =
|
||
`left:${x}px;
|
||
top:${y}px;
|
||
display:block`
|
||
}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
</html> |