当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js实现自定义右键菜单

js实现自定义右键菜单

2020年06月14日  | 移动技术网IT编程  | 我要评论

泥土的梦,徐紫欣,苹果手机怎样省电

本文实例为大家分享了js实现右键菜单的具体代码，供大家参考，具体内容如下

原理：

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?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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网