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读取中文COOKIE的解决办法
Feb 15 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
一个实用的php验证码类
2017/07/06 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
js截取小数点后几位的写法
2013/11/14 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python实现中文输出的两种方法
2015/05/09 Python
Python读取键盘输入的2种方法
2015/06/16 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
中专生自荐信
2013/10/12 职场文书
企业统计员岗位职责
2013/12/13 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
红旗方阵解说词
2014/02/12 职场文书
八项规定整改措施
2014/02/12 职场文书
九九重阳节标语
2014/10/07 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
关于远足的感想
2015/08/10 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js