原生JS实现右键弹出自定义的菜单

最新推荐文章于 2022-11-08 13:42:18 发布

我是一只猴子

最新推荐文章于 2022-11-08 13:42:18 发布

阅读量944

点赞数 1

分类专栏： JAVA 程序员递归文章标签： js css javascript html jquery

本文链接：https://blog.csdn.net/qq_41864443/article/details/117782077

版权

程序员同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

JAVA

3 篇文章 0 订阅

订阅专栏

递归

2 篇文章 0 订阅

订阅专栏

css样式文件：css/onclick.css

.mydiv {
    margin: 20px auto;
    width: 400px;
    height: 300px;
    background-color: rgb(170, 238, 232);
    position: relative;
}

.myul {
    width: 80px;
    height: 150px;
    position: absolute;
    display: none;
}

.box {
    list-style: none;
    height: 30px;
    width: 100px;
    text-align: center;
    line-height: 30px;
    text-align: left;
    background-color: rgb(170, 238, 232);
}

.box:hover {
    background-color: #4281f4;
    color: #fff;
}

HTML文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="mydiv" id="mydiv">
        
    </div>
    <script  src="static/t/onclick.js"></script>
</body>

</html>

JS文件：onclick.js



includeLinkStyle();
initTop();
a();

/**
 * 加载CSS样式
 */
 function includeLinkStyle(){
    var link = document.createElement( "link" );
    link.rel =  "stylesheet" ;
    link.type =  "text/css" ;
    link.href = "static/css/onclick.css";
    document.getElementsByTagName( "head" )[0].appendChild(link);
  }

/**
 * 初始化右击选项框
 * <div class="myul">
        <div id="box1" class="box">新建文件</div>    
        <div id="box2" class="box">删除文件</div> 
        <div id="box3" class="box">修改文件名</div>      
    </div>
 */
function initTop(){
    console.log("开始初始化右击选项框");
    const mydiv = document.getElementById('mydiv');

    const myul = document.createElement("div");
    myul.id = "myul";
    myul.className = "myul";
    mydiv.appendChild(myul);

    const div1 = document.createElement("div");
    div1.id = "box1";
    div1.className = "box";
    div1.innerText = "新建文件";
    div1.addEventListener('click', newFile);

    const div2 = document.createElement("div");
    div2.id = "box2";
    div2.className = "box";
    div2.innerText = "删除文件";
    div2.addEventListener('click', deleteFile);

    myul.appendChild(div1);
    myul.appendChild(div2);
}

/**
 * 触发右击菜单框事件
 */
function a(){
  let mydiv = document.querySelector('.mydiv');
  let myul = document.querySelector('.myul');
  mydiv.addEventListener('contextmenu', fn);
  //contextmenu右键
  function fn(e) {
      e.preventDefault();//preventDefault()阻止默认事件（这里阻止了默认菜单）
      myul.style.display = 'block';//点击右键菜单显示出来
      let X=e.pageX - this.offsetLeft;
      let Y=e.pageY - this.offsetTop;
      myul.style.left=X+'px';
      myul.style.top=Y+'px';
  }
  
  window.onclick = function (event) {
      if (event.target.tagName == 'DIV') {
          //如果点击到 LI（菜单）就停止执行return之后的代码，菜单就不会隐藏
          return;
      }
      myul.style.display = 'none'
      //如果点击菜单外的任意位置，菜单被隐藏
  }
}

/**
 * 新建
 */
function newFile(){
  console.log("新建");
  /**
   * 触发事件后，隐藏右选菜单
   */
  let myul = document.querySelector('.myul');
  myul.style.display = 'none'
}

function deleteFile(){
  console.log("删除");
  /**
   * 触发事件后，隐藏右选菜单
   */
  let myul = document.querySelector('.myul');
  myul.style.display = 'none'
}

效果：
在这里插入图片描述
参考：https://blog.csdn.net/HaiRong_21/article/details/108492230?utm_medium=distribute.pc_relevant_download.none-task-blog-2_defaultsearchFromBaidu_{default-6.nonecase&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2}default_{searchFromBaidu}default-6.nonecas

我是一只猴子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现右键弹出自定义的菜单

css样式文件：css/onclick.css.mydiv { margin: 20px auto; width: 400px; height: 300px; background-color: rgb(170, 238, 232); position: relative;}.myul { width: 80px; height: 150px; position: absolute; display: none;}.box
复制链接

扫一扫