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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
JavaScript实现网页留言板功能
Nov 23 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
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
laravel 查询数据库获取结果实现判断是否为空
2019/10/24 PHP
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
python3.5安装python3-tk详解
2019/04/26 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
js实现弹框效果
2021/03/24 Javascript
《望洞庭》教学反思
2014/02/16 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
公路施工安全责任书
2015/05/08 职场文书
同乡会致辞
2015/07/30 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
MySQL的索引你了解吗
2022/03/13 MySQL