first commit

历届学生/font-end-nine/项目练习/学生项目/张婷/练习/案例自写/0617/案例五.html

@@ -0,0 +1,104 @@
+<!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>