JavaScript自定义html元素鼠标右键菜单功能-创新互联

自定义html元素鼠标右键菜单

创新互联是一家专注于成都做网站、网站建设与策划设计,萧县网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:萧县等地区。萧县做网站价格咨询:18982081108

实现思路

在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象，来确定鼠标的点击位置，作为显示菜单的left和top值

编码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
  window.onload = function(){
  var menu = document.getElementById('menu');
  document.body.oncontextmenu = function(e){ // 自定义body元素的鼠标事件处理函数
    var e = e || window.event;
    e.preventDefault(); //阻止系统右键菜单 IE8-不支持
    // 显示自定义的菜单调整位置
    let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置
    let scrollLeft =
        document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置
    menu.style.display = 'block';
    menu.style.left = e.clientX + scrollLeft + 'px';
    menu.style.top = e.clientY + scrollTop + 'px';
  }
  // 鼠标点击其他位置时隐藏菜单
  document.onclick = function(){
    menu.style.display = 'none';
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  p{
    margin-top: 200px; 
  }
  ul li{
    list-style-type: none;
    margin: 10px 0;
    text-align: center;
  }
  #menu{
    border:1px solid #ccc;
    background: #eee;
  position: absolute; // 设置菜单为绝对位置
    width: 100px;
    height: 120px;
    display: none;
  }
</style>
</head>
<body >
  <div id="box" >让body元素出现滚动条用的div</div>
  <div id="menu">
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >分享</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >收藏</a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >举报</a></li>
    </ul>
  </div>
</body>
</html>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。