JavaScript实现鼠标右键点击弹出Div的简单实例

作者:函数茶馆

时间:2026-10-30

浏览:302

本文介绍如何使用JavaScript监听鼠标右键点击事件来动态显示一个Div元素。通过禁用默认右键菜单,获取点击坐标,并控制Div的显示与定位,实现简单的右键交互效果。

文章目录

JavaScript实现鼠标右键点击弹出Div的简单实例

本示例演示如何利用JavaScript处理鼠标事件,具体功能为在用户点击鼠标右键时弹出一个Div层。


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盒子
    }
    
   }

以上就是JavaScript鼠标事件中关于点击右键弹出Div的完整实现方法,供读者参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章