codebasecodebase · codebasecodebase · Apr 18, 2020 · retarcorp · Apr 24, 2020 · retarcorp
diff --git a/1.css b/1.css
@@ -0,0 +1,42 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
+body {
+   display: flex;
+    font-family: Arial, Helvetica, sans-serif;
+}
+.right-click-area {
+    width: 100%;
+    height: 100%;
+
+    color: white;
+    margin: auto;
+    display: flex;
+    position: relative;
+}
+.right-click-menu {
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    list-style: none;
+    background: #000000;
+    border: 2px solid #ffffff;
+    border-radius: 2px;
+    display: none;
+}
+.right-click-menu.active {
+    display: block;
+}
+.right-click-menu li {
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-size: 20px;
+}
+.right-click-menu li:hover {
+    background: #333333;
+}
diff --git a/1.html b/1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="1.css" rel="stylesheet">
+</head>
+<body>
+    <div class="right-click-area">
+        <ul class="right-click-menu">
+            <li id="l1">Выучить html</li>
+            <li id="l2">Выучить js</li>
+            <li id="l3">Выучить реакт</li>
+            <li id="l4">Выучить промисы</li>
+        </ul>
+    </div>
+</body>
+<script src="1.js"></script>
+</html>
diff --git a/1.js b/1.js
@@ -0,0 +1,26 @@
+const menuArea = document.querySelector(".right-click-area");
+        const menu = document.querySelector(".right-click-menu");
+
+        menuArea.addEventListener( "contextmenu", event => {
+            event.preventDefault();
+            menu.style.top = `${event.clientY}px`;
+            menu.style.left = `${event.clientX}px`;
+            menu.classList.add("active");
+            if (`${event.clientX}` >= 1200) {
+                menu.style.cssText = "pading: 0"; 
+            }
+            if (`${event.clientY}` >= 700) {
+                menu.style.cssText = "pading: 0"; 
+            }
+        }, false);
+
+        document.addEventListener("click", event => {
+            if (event.button !== 2) {
+                menu.classList.remove("active");
+                menu.removeAttribute("pading")
+            }
+        }, false);
+
+        menu.addEventListener("click", event => {
+            event.stopPropagation();
+        }, false);
diff --git a/2.css b/2.css
@@ -0,0 +1,40 @@
+#main {
+    width: 1000px;
+    height: 500px;
+    background-color: gray;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-around;
+}
+
+#obj1 {
+    width: 30px;
+    height: 50px;
+    background: green;
+    position : relative;
+
+}
+
+#obj2 {
+    width: 30px;
+    height: 50px;
+    background: red;
+    position : relative;
+
+}
+
+#obj3 {
+    width: 30px;
+    height: 50px;
+    background: blue;
+    position : relative;
+
+}
+
+#obj4 {
+    width: 30px;
+    height: 50px;
+    background: purple;
+    position : relative;
+
+}
diff --git a/2.html b/2.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="2.css" rel="stylesheet">
+</head>
+<body>
+    <div id = "main">
+        <div id="obj1"></div>
+        <div id="obj2"></div>
+        <div id="obj3"></div>
+        <div id="obj4"></div>
+    </div>
+</body>
+<script src="2.js"></script>
+</html>
diff --git a/2.js b/2.js
@@ -0,0 +1,127 @@
+const menuArea = document.querySelector("#main");
+const menu1 = document.querySelector("#obj1");
+
+        menuArea.addEventListener( "contextmenu", event => {
+            event.preventDefault();
+            menu1.style.top = `${event.clientY}px`;
+            menu1.style.left = `${event.clientX}px`;
+            menu1.classList.add("active");
+        }, false);
+
+        document.addEventListener("click", event => {
+            if (event.button !== 2) {
+                menu1.classList.remove("active");
+                menu1.removeAttribute("pading")
+            }
+        }, false);
+
+        menu1.addEventListener("click", event => {
+            event.stopPropagation();
+        }, false);
+
+
+        ////////////////////////////////////////// 1
+
+
+const menu2 = document.querySelector("#obj2");
+
+        menuArea.addEventListener( "contextmenu", event => {
+            event.preventDefault();
+            menu2.style.top = `${event.clientY}px`;
+            menu2.style.left = `${event.clientX}px`;
+            menu2.classList.add("active");
+        }, false);
+
+        document.addEventListener("click", event => {
+            if (event.button !== 2) {
+                menu2.classList.remove("active");
+                menu2.removeAttribute("pading")
+            }
+        }, false);
+
+        menu2.addEventListener("click", event => {
+            event.stopPropagation();
+        }, false);
+
+
+        ////////////////////////////////////////// 2
+
+
+const menu3 = document.querySelector("#obj3");
+
+        menuArea.addEventListener( "contextmenu", event => {
+            event.preventDefault();
+            menu3.style.top = `${event.clientY}px`;
+            menu3.style.left = `${event.clientX}px`;
+            menu3.classList.add("active");
+        }, false);
+
+        document.addEventListener("click", event => {
+            if (event.button !== 2) {
+                menu3.classList.remove("active");
+                menu3.removeAttribute("pading")
+            }
+        }, false);
+
+        menu3.addEventListener("click", event => {
+            event.stopPropagation();
+        }, false);
+
+
+        ////////////////////////////////////////// 3
+
+
+
+const menu4 = document.querySelector("#obj4");
+
+        menuArea.addEventListener( "contextmenu", event => {
+            event.preventDefault();
+            menu4.style.top = `${event.clientY}px`;
+            menu4.style.left = `${event.clientX}px`;
+            menu4.classList.add("active");
+        }, false);
+
+        document.addEventListener("click", event => {
+            if (event.button !== 2) {
+                menu4.classList.remove("active");
+                menu4.removeAttribute("pading")
+            }
+        }, false);
+
+        menu4.addEventListener("click", event => {
+            event.stopPropagation();
+        }, false);
+
+
+        ////////////////////////////////////////// 3
+
+
+
+
+
+
+
+
+
+
+window.addEventListener('load', function () { //все в один блок, т.к. вам же надо получить #obj ?
+    var O = document.getElementById('obj3'),
+        X = menu1.style.left,
+        Y = menu1.style.top,mouseX=0,mouseY=0; //надо  объявлять X/Y здесь, т.к они используются за пределами замыкания обработчика
+    window.addEventListener('mousemove', function (ev) {
+        ev = window.event || ev; //если window.event определен, то это IE<9, поддерживаем 
+        X=ev.pageX;
+        Y=ev.pageY;
+    });
+
+    function move() { //зачем аргумент ?
+        var p = 'px';
+        console.log(X,Y);
+        O.style.left = X + p;
+        O.style.top = Y + p;
+
+        setTimeout(move, 1);
+    }
+    move();
+
+});