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 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
用JavaScript调用WebService的示例
2008/04/07 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
美国性感女装网站:bebe
2017/03/04 全球购物
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
银行开户授权委托书格式
2014/10/10 职场文书
投标承诺函格式
2015/01/21 职场文书
元宵节晚会主持词
2015/07/01 职场文书
《山中访友》教学反思
2016/02/24 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis