JavaScript模拟鼠标右键菜单效果


Posted in Javascript onDecember 08, 2020

本文实例为大家分享了JavaScript模拟鼠标右键菜单的具体代码,供大家参考,具体代码如下

效果图:

JavaScript模拟鼠标右键菜单效果

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右键菜单</title>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  #menu{
   width: 254px;
   /*background-color: #ccc;*/
   font-size: 12px;
   position: fixed;
   top: 0px;
   left: 0px;
   /*height: 240px;*/
   /*padding-left: 26px;*/
   padding-top: 2px;
   border:1px solid #ccc;
   display: none;
  }
  #menu li{
   list-style: none;
   line-height: 25px;
   margin-left: -1px;
   padding-left: 26px;
  }
  #menu li:hover{
   background-color: #4281f4;
   color: #fff;
  }
 </style>
</head>
<body>
  <ul id="menu">
   <li>返回(B)</li>
   <li>前进(F)</li>
   <li>从新加载(R)</li>
   <li>另存为(A)</li>
   <li>打印(P)</li>
   <li>查看网页源代码(V)</li>
   <li>查看网页信息(I)</li>
   <li>审查元素(N)</li>
  </ul>
  <script type="text/javascript">
  var menu = document.getElementById("menu");

  document.oncontextmenu =function(e){
   var e = e ||window.event;//兼容
   console.log(e.clientX,e.clientY);
   console.log(e);
   //单击显示div
   menu.style.display = "block";
   //设置定义
   //判断鼠标坐标是否大于视口宽度-块本身宽度
   var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth)?(document.documentElement.clientWidth - menu.offsetWidth):e.clientX;
   var cakTop = (e.clientY > document.documentElement.clientHeight - menu.offsetHeight)?(document.documentElement.clientHeight - menu.offsetHeight):e.clientY;
   menu.style.left = cakLeft + "px";
   menu.style.top = cakTop + "px";

  return false;
  }

   menu.onclick = function(e) {
  var e = e || window.event;
  e.cancelBubble = true;
  //阻止冒泡。
 }
  document.onclick = function() {
  menu.style.display = "none";
 }
  
  </script>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的Array对象使用说明
Jan 17 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
详解Vue底部导航栏组件
May 02 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
javascript实现移动端上的触屏拖拽功能
Mar 04 #Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 #Javascript
基于Javascript实现二级联动菜单效果
Mar 04 #Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 #Javascript
js实现文字滚动效果
Mar 03 #Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
You might like
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python中for循环控制语句用法实例
2015/06/02 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
利用Python实现kNN算法的代码
2019/08/16 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
简历中个人自我评价分享
2014/03/15 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
欢度春节标语
2014/07/01 职场文书
公司领导班子对照材料
2014/08/18 职场文书
就业协议书
2014/09/12 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL