JS如何实现自定义鼠标右击菜单

自定义鼠标右击菜单要素：

禁止页面默认右击事件

设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）

鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）

效果图

代码如下：

HTML代码

 !DOCTYPE html  html  head  meta charset= UTF-8  meta name= viewport content= width=device-width, initial-scale=1.0  meta http-equiv= X-UA-Compatible content= ie=edge  title Document /title  link rel= stylesheet type= text/css href= right-click.css /  /head  body  div id= contain-friend 右击显示菜单 /div  label id= label1 /label  div id= menu-friend  div  button id= btn1 菜单一 /button  /div  div  button id= btn2 菜单二 /button  /div  /div  script src= right-click.js /script  /body  /html 

HTML

JS代码

关于菜单的定位主要是在第一个if语句部分，后面为验证按钮效果。

menu1.style.left和menu1.style.top用于对菜单进行定位，由css样式表可知menu1的position属性定位为absolute，style.top定位相对于离它最近的position属性值不为static的父辈元素，此处即为body。

menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它，此处加上document.documentElement.scrollTop是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。

window.onload = function() { //以下为自定义右击菜单 document.oncontextmenu = function(e) { //阻止执行浏览器默认右击事件 e.preventDefault(); //聊天室好友列表 if (document.getElementById( menu-friend )) { var menu1 = document.getElementById( menu-friend  menu1.style.display = block  document.getElementById( contain-friend ).onmousedown = function(e) { //菜单定位 menu1.style.left = e.offsetX + px  menu1.style.top = document.documentElement.scrollTop + e.clientY + px  //alert(menu1.style.top) if (document.getElementById( contain-friend )) { if (e.button == 2) { menu1.style.visibility = visible  } else { menu1.style.visibility = hidden  if (document.getElementById( btn1 )) { document.getElementById( btn1 ).onmousedown = function(e) { document.getElementById( label1 ).innerHTML = 你点击了菜单一  if (document.getElementById( btn2 )) { document.getElementById( btn2 ).onmousedown = function(e) { document.getElementById( label1 ).innerHTML = 你点击了菜单二  return false; //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行}

JavaScript文件

CSSyangshi_10628_1.html' target='_blank'>CSS样式表

1/*自定义右击菜单*/

.contain { background-color: #D1CEBC; height: 100px; width: 300px;.menu { width: 150px; background-color: white; visibility: hidden; position: absolute; box-shadow: 0px 0px 10px #D1CEBC.menu-item { background-color: #fff; margin: 0;.menu-item-btn { width: 146px; margin: 2px; border: 0; text-align: left; padding-left: 60px; padding-top: 5px; padding-bottom: 5px; background-color: #fff; color: #000;.menu-item-btn:hover { background-color: #D1CEBC;}

相信看了这些案例你已经掌握了方法，更多精彩请关注php 其它相关文章！

相关阅读：

HTML中关于盒模型的总结

html语义化有那些作用

HTML中移动端有哪些布局方案

input的文本框怎么做到和img验证码

以上就是JS如何实现自定义鼠标右击菜单的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。