<!DOCTYPE html>
<html>
<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>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 400px;
height: 400px;
border: 2px solid #ccc;
position: relative;
left: 50px;
top: 50px;
}
.menu{
width: 80px;
border: 1px solid #ccc;
text-align: center;
padding: 5px 0;
background: linear-gradient(to left top,black, purple, black);
position: absolute;
left: 50px;
top: 50px;
/* 请使用 "display" 属性来创建不占据页面空间的不可见元素。 */
/* display: none; */
/* visibility 属性规定元素是否可见。即使不可见的元素也会占据页面上的空间。
属性值包括：
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，
但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit 规定应该从父元素继承 visibility 属性的值。
*/
visibility: hidden;
}
/* .menu ul{
display: flex;
justify-content: space-evenly;
} */
.menu ul li{
padding: 5px 0;
}
.menu ul li button{
padding: 0 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="menu">
<ul>
<li><button>查询</button></li>
<li><button>添加</button></li>
<li><button>修改</button></li>
<li><button>删除</button></li>
</ul>
</div>
</div>
<script>
/*
右键菜单
e.target 获取具体的元素
e.preventDefault() 阻止默认行为
*/
// 获取box
let box = document.querySelector('.box')
// 获取menu
let menu = document.querySelector('.menu')
/*
JS 获取宽度的3个方法 笔记
1 offsetWidth 自身，padding，边框，内容区的宽度，返回数值不带单位
2. clientWidth 自身，padding，不包含边框，内容区的宽度，返回数值不带单位
3. scrollWidth 自身的实际宽度（overflow：hidden；超出被隐藏的也算进去），不含边框，返回数值不带单位
边框宽度 = (offsetWidth - clientWidth) / 2
一般用法
offsetXXX :一般用来获取元素位置
clientXXX ： 经常用来获取元素大小
scrollXXX ： 获取滚动距离
页面滚动距离用 window.pageYOffset上下 , window.pageXOffset 左右
*/
// 获取box的默认外边距
let box_left = box.offsetLeft
let box_top = box.offsetTop
// console.log(box_left, box_top);
// 获取box的边框宽度
let box_leftBorderWidth = (box.offsetWidth - box.clientWidth) / 2
let box_topBorderWidth = (box.offsetHeight - box.clientHeight) / 2
// console.log(box_leftBorderWidth);
// console.log(box_topBorderWidth);
// 计算菜单的最大位置
let menu_leftMax = box.offsetWidth - menu.offsetWidth - box_leftBorderWidth * 2
// console.log(box.offsetWidth, menu.clientWidth, box_leftBorderWidth);
let menu_topMax = box.offsetHeight - menu.offsetHeight - box_topBorderWidth * 2
console.log(menu_leftMax, menu_topMax);
// box注册鼠标右键点击事件
box.oncontextmenu = function(e) {
// 获取鼠标的位置
let {pageX, pageY} = e
// console.log(pageX, pageY);
// console.log(e);
// 阻止默认行为
e.preventDefault()
// 显示菜单
// menu.style.display = 'block'
menu.style.visibility = 'visible'
// 更新菜单位置
let a = pageX - box_left - box_leftBorderWidth * 2
let b = pageY - box_top - box_topBorderWidth * 2
console.log(a, b);
menu.style.left = ((a <= menu_leftMax)? a : menu_leftMax) + 'px'
menu.style.top = ((b <= menu_topMax)? b : menu_topMax) + 'px'
}
// box注册鼠标左键点击事件
box.onclick = function(e) {
// 获取box里面被点击的具体（某一个）标签元素
// 比如：div, ul, li, button
let {target} = e
// console.log(target);
// if(this.contains(target)){ 相当于if(true){}
if(this === target){ // 点击box就会隐藏菜单，其它不隐藏
// 隐藏菜单
// menu.style.display = 'none'
menu.style.visibility = 'hidden'
}
}
</script>
</body>
</html>
