<!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>功能實(shí)現(xiàn)：右鍵菜單</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" 屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素棘幸。 */
? ? ? ? ? ? /* display: none; */
? ? ? ? ? ? /* visibility 屬性規(guī)定元素是否可見国旷。即使不可見的元素也會占據(jù)頁面上的空間初茶。
? ? ? ? ? ? 屬性值包括：
? ? ? ? ? ? visible 默認(rèn)值。元素是可見的咐刨。
? ? ? ? ? ? hidden ?元素是不可見的。
? ? ? ? ? ? collapse ? ?當(dāng)在表格元素中使用時，此值可刪除一行或一列，
? ? ? ? ? ? 但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上蛙奖，會呈現(xiàn)為 "hidden"潘酗。
? ? ? ? ? ? inherit 規(guī)定應(yīng)該從父元素繼承 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() 阻止默認(rèn)行為
? ? ? ? */
? ? ? ? // 獲取box
? ? ? ? let box = document.querySelector('.box')
? ? ? ? // 獲取menu
? ? ? ? let menu = document.querySelector('.menu')
? ? ? ? /*
? ? ? ? ? ? JS 獲取寬度的3個方法 筆記
? ? ? ? ? ? 1 offsetWidth ? ?自身雁仲，padding仔夺，邊框，內(nèi)容區(qū)的寬度攒砖，返回數(shù)值不帶單位
? ? ? ? ? ? 2. clientWidth ? 自身缸兔，padding，不包含邊框吹艇，內(nèi)容區(qū)的寬度惰蜜，返回數(shù)值不帶單位
? ? ? ? ? ? 3. scrollWidth ? 自身的實(shí)際寬度（overflow：hidden；超出被隱藏的也算進(jìn)去）受神，不含邊框抛猖，返回數(shù)值不帶單位
? ? ? ? ? ? 邊框?qū)挾?= (offsetWidth - clientWidth) / 2
? ? ? ? ? ? 一般用法
? ? ? ? ? ? offsetXXX ?:一般用來獲取元素位置
? ? ? ? ? ? clientXXX ?： 經(jīng)常用來獲取元素大小
? ? ? ? ? ? scrollXXX ?： 獲取滾動距離
? ? ? ? ? ? 頁面滾動距離用 ?window.pageYOffset上下 , window.pageXOffset 左右
? ? ? ? */
? ? ? ? // 獲取box的默認(rèn)外邊距
? ? ? ? let box_left = box.offsetLeft
? ? ? ? let box_top = box.offsetTop
? ? ? ? // console.log(box_left, box_top);
? ? ? ? // 獲取box的邊框?qū)挾?/p>
? ? ? ? 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注冊鼠標(biāo)右鍵點(diǎn)擊事件
? ? ? ? box.oncontextmenu = function(e) {
? ? ? ? ? ? // 獲取鼠標(biāo)的位置
? ? ? ? ? ? let {pageX, pageY} = e
? ? ? ? ? ? // console.log(pageX, pageY);
? ? ? ? ? ? // console.log(e);
? ? ? ? ? ? // 阻止默認(rèn)行為
? ? ? ? ? ? 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注冊鼠標(biāo)左鍵點(diǎn)擊事件
? ? ? ? box.onclick = function(e) {
? ? ? ? ? ? // 獲取box里面被點(diǎn)擊的具體（某一個）標(biāo)簽元素
? ? ? ? ? ? // 比如：div, ul, li, button
? ? ? ? ? ? let {target} = e
? ? ? ? ? ? // console.log(target);
? ? ? ? ? ? // if(this.contains(target)){ ?相當(dāng)于if(true){}
? ? ? ? ? ? if(this === target){ ?// 點(diǎn)擊box就會隱藏菜單，其它不隱藏
? ? ? ? ? ? ? ? // 隱藏菜單
? ? ? ? ? ? ? ? // menu.style.display = 'none'
? ? ? ? ? ? ? ? menu.style.visibility = 'hidden'
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
