JavaScript实现鼠标右键点击弹出自定义Div

一只小鹿

发布时间：2026-10-14 | 4人浏览过

原创

本文演示如何利用JavaScript原生API实现点击鼠标右键弹出自定义Div的功能。通过监听 onmouseup 事件并结合 e.button 属性识别右键，同时在页面初始化阶段禁用浏览器默认的右键菜单，从而为自定义交互腾出空间。

实现原理与目标

该功能主要包含两个核心步骤：

禁用默认行为：拦截浏览器默认的右键菜单，防止其遮挡自定义UI或造成体验冲突。
捕获右键点击：利用鼠标抬起事件（mouseup）检测按键类型，获取点击坐标并控制元素的显示与位置。

代码实现详解

以下是一个完整的单文件示例，可以直接保存为HTML文件运行。

document.oncontextmenu = function(){return false};   //禁止鼠标右键菜单显示
   var res = document.getElementById('box');   //找到id为box的div
   document.body.onmouseup = function(e){   //在body里点击触发事件
    if(e.button===2){    //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
      console.log(e);   //将传进去的参数打印出来
      console.log(e.offsetY);   //打印出鼠标点击的Y轴坐标
      console.log(e.offsetX);   //打印出鼠标点击的X轴坐标
      res.style.top = e.offsetY+'px';   //鼠标点击时给div定位Y轴
      res.style.left = e.offsetX+'px';  //鼠标点击时给div定位X轴
      res.style.display = 'block';    //显示div盒子
    }else{
      res.style.display = 'none';     //否则不显示div盒子
    }
    
   }

关键参数解析

document.oncontextmenu：全局拦截上下文菜单返回 false 即可屏蔽默认弹窗。
e.button === 2：MouseEvent 对象中的 button 字段标识具体按键，数值 2 代表鼠标右键。
e.offsetX/Y：相对触发元素（此处为 body）左上角的偏移量，用于精确定位弹出的 Div。

必要的前置条件与HTML结构

为了使上述JS逻辑生效，网页中必须存在对应的HTML结构。确保页面头部已引入基础样式以设置 Div 的定位模式：

<!-- 简单的 CSS 样式 -->
<style>
  #box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: absolute; /* 必须使用绝对定位 */
    display: none;      /* 初始状态隐藏 */
  }
</style>

<!-- 页面内容 -->
<body>
  <div id="box">右键弹出的内容</div>
  <script src="your-script.js"></script> <!-- 或者直接将脚本写在内联中 -->
</body>

验证与排错

如果点击右键后 Div 没有出现或位置错误，请按以下步骤检查：

控制台报错排查：按 F12 打开开发者工具查看 Console，确认是否报 Uncaught TypeError，通常因 DOM 未加载完毕导致 getElementById 返回 null。
定位模式检查：确认 #box 元素拥有 position: absolute 或 fixed，否则 top/left 属性无效。
按钮值确认：在某些浏览器或特殊配置下，右键返回值可能不同。可在 if 判断前增加 console.log(e.button) 实际观察输出值再调整判断条件。