js自定义右键菜单

最新推荐文章于 2023-01-26 12:34:40 发布

zuiziyoudexiao

最新推荐文章于 2023-01-26 12:34:40 发布

阅读量2.2k

点赞数 3

分类专栏： js

本文链接：https://blog.csdn.net/zuiziyoudexiao/article/details/86773704

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

利用监听window对象的oncontextmenu事件来实现自定义的菜单
首先将菜单隐藏起来，当捕获到右键事件时，将菜单移动到合适位置再显示出来
当鼠标移出菜单区域或左键点击菜单时再隐藏菜单
看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义右键菜单</title>
<style>
body{ background-color: pink;}
/*菜单样式*/
#menu{
  width:100px;z-index:100;position: absolute;right: 410px;top:53px;
  display: none;}
#menu a{
  color: black;
   display: inline-block;
   background-color: #fff;
   width: 100px;
   height: 35px;
   text-align: center;
   line-height: 35px;
   border: 1px black;
}
#menu a:hover{  background-color: #38aae1;  }
</style>
</head>
<body>

<!-- 菜单 -->
<div id="menu" >
  <a id="asg">编辑</a>
  <a id="agg">删除</a>
  <a id="aby">上移</a>
  <a id="aby">下移</a>
</div>
<script>
    //点击鼠标右键响应函数
    window.oncontextmenu = function(e){
       
       //对右键菜单进行定位
       if(e.clientX+100<=innerWidth){
           var x = e.clientX;
       }
       else{
           var x = e.clientX - 98;
       }
       if(e.clientY+140<=innerHeight){
           var y = e.clientY;
       }
       else{
           var y = e.clientY - 138;
       }
       document.getElementById('menu').style.left=x+'px';
       document.getElementById('menu').style.top=y+'px';
       document.getElementById('menu').style.display='block';

       
    //取消默认的浏览器自带右键
    e.preventDefault();
    
    }
//隐藏菜单函数
  document.getElementById('menu').onclick = function(){
    document.getElementById('menu').style.display='none';
  }
  document.getElementById('menu').onmouseleave = function(){
    document.getElementById('menu').style.display='none';
  }
</script>
</body>
</html>