js实现自定义右键菜单的方法

这篇文章主要讲解了js实现自定义右键菜单的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都创新互联公司2013年成立，公司以成都网站设计、成都做网站、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户上千余家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。

原理：

1.屏蔽默认的右键菜单

2.点击右键获取位置，让自定义菜单到点击位置上

3.点击左键，自定义菜单消失

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右键菜单练习</title>
 <style>
 *{
  margin: 0;
  /*padding: 0;*/
 }
 ul{
  width: 120px;
  height: 150px;
  background-color: rgb(204,204,204);
  font-size: 22px;
  list-style: none;
  line-height: 50px;
  position: fixed;
  display: none;
 }
 li{
  background-color: rgb(238,238,238);
  padding-left: 15px;
 }
 </style>
</head>
<body>
<ul id="ul">
 <li>复制</li>
 <li>剪切</li>
 <li>粘贴</li>
</ul>
<script>
 //给document 添加 oncontextmenu 事件 取消默认的右键菜单的行为。
 //点击右键的时候，获得点击的位置。
 var ul = document.getElementById('ul');
 document.oncontextmenu=function(e){
 e=e||window.event;
 //屏蔽样式
 e.preventDefault&#63;e.preventDefault():(e.returnValue=false);
 //获取坐标
 var x=e.clientX;//视口的位置
 var y=e.clientY;

 //显示菜单
 ul.style.display='block';
 ul.style.top=y+'px';
 ul.style.left=x+'px';
 };
 //点击左键 自定义菜单消失
 document.onclick=function () {
 ul.style.display='none';
 };
 //给每个li添加 鼠标进入(onmouseover)和鼠标离开(onmouseout)的事件
 var lis = document.querySelectorAll('li');
 for (let i = 0; i < lis.length; i++) {
 lis[i].onmouseover=function () {
  lis[i].style.backgroundColor='rgb(204,204,204)';
 };
 lis[i].onmouseout=function () {
  lis[i].style.backgroundColor='rgb(238,238,238)';
 }
 }

</script>
</body>
</html>

看完上述内容，是不是对js实现自定义右键菜单的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

当前题目：js实现自定义右键菜单的方法
URL地址：https://www.cdcxhl.com/article20/johpco.html

成都网站建设公司_创新互联，为您提供网站导航、网站排名、营销型网站建设、外贸建站、网站收录、域名注册

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容