• 【无标题】右键菜单

    1.     let treeright = document.querySelector(".treeright");
    2.     treeright.addEventListener("contextmenu", this.rightMeun);
    3.     this.rightMeunDefault();
    1.     rightMeun(e) {
    2.       e.preventDefault();
    3.       let mymeun = document.getElementById("mymeun");
    4.       if(this.isMeun===true){
    5.       mymeun.style.display = "block";}
    6.       else{
    7.        mymeun.style.display = "none";
    8.       }
    9.       let X = e.pageX - 260;
    10.       let Y = e.pageY - 3;
    11.       mymeun.style.left = X + "px";
    12.       mymeun.style.top = Y + "px";
    13.     },
    14.     rightMeunDefault() {
    15.       let mymeun = document.getElementById("mymeun");
    16.       window.onclick = function (event) {
    17.         mymeun.style.display = "none";
    18.         //如果点击菜单外的任意位置，菜单被隐藏
    19.       };
    20.     },
    1. #mymeun {
    2.   position: absolute;
    3.   top: 0px;
    4.   display: none;
    5.   border: 1px solid #dadce0;
    6.   box-shadow: 1px 1px 2px rgb(150 141 141);
    7.   /* background-color: red; */
    8.   width: 100px;
    9. }
    1.     <div id="mymeun">
    2.       <div @click="newView">新增div>
    3.       <div @click="isIcon = false">列表div>
    4.       <div @click="isIcon = true">大图标div>
    5.     div>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>冒泡菜单title>
    9.     <style>
    10.         #muen {
    11.             display: none;
    12.             height: 100px;
    13.             width: 50px;
    14.             position: absolute;
    15.             top: 0;
    16.             left: 0;
    17.             background-color: aliceblue;
    18.             box-shadow: 1px 2px 5px rgb(173, 173, 173);
    19.         }
    20.         .all {
    21.             height: 100vh;
    22.             width: 100%;
    23.             background-color: aqua;
    24.         }
    25.     style>
    26. head>
    27.  
    28. <body>
    29.     <div class="all" onclick="isMenu()">
    30.  
    31.     div>
    32.     <div id="muen">
    33.         
    34.         <li>11li>
    35.         <li>22li>
    36.         <li>33li>
    37.  
    38.         
    39.  
    40.     div>
    41.     <script>
    42.         let all = document.querySelector(".all");
    43.         //  all.addEventListener("contextmenu", rightMeun());
    44.         //  function rightMeun(){
    45.         //     console.log("dddd");
    46.         //  }
    47.         //this.rightMeunDefault();
    48.         //this.initImage()
    49.         all.oncontextmenu = function (e) {
    50.             const muenId = document.getElementById("muen")
    51.             muenId.style.display = "block"
    52.             let X = e.pageX;
    53.             let Y = e.pageY;
    54.             muenId.style.left = X + "px";
    55.             muenId.style.top = Y + "px";
    56.             return false
    57.         }
    58.         function isMenu() {
    59.             const muenId = document.getElementById("muen")
    60.             muenId.style.display = "none"
    61.         }
    62.         window.onclick = function () {
    63.         }
    64.     script>
    65. body>
    66.  
    67. html>

  • 相关阅读:
    linux安装aerospike免安装版
    java计算机毕业设计基于node.js的疫情大数据展示与政策查询系统
    使用PowerShell脚本来一键开启、关闭FTP服务
    ＜stl系列＞，vector深度剖析，掌握stl容器从这篇文章开始
    Dash应用页面整体布局技巧
    【数据结构】Set和Map
    fabic.js Quadratic Curve /可控制的曲线
    java虚拟机详解篇二（类字节码详解）
    Undo Log、Redo Log、binlog与两阶段提交
    java毕业设计商场会员管理系统源码+lw文档+mybatis+系统+mysql数据库+调试
  • 原文地址：https://blog.csdn.net/qq_51389137/article/details/125594603