js实现右键菜单功能


Posted in Javascript onNovember 28, 2016

本文解决的问题:1、实现右键菜单功能代码;2、阻止默认事件的实际应用。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>右键菜单</title>
 <style type="text/css">
  #menu {
   position: fixed;
   left:0;
   top:0;
   width:200px;
   height: 400px;
   background-color: blue;
   display: none;
  }
 </style>
</head>
<body>
 <div id="menu">

 </div>
 <script type="text/javascript">
 var menu = document.getElementById("menu");
 document.oncontextmenu = function(e) {
  var e = e || window.event;
  //鼠标点的坐标
  var oX = e.clientX;
  var oY = e.clientY;
  //菜单出现后的位置
  menu.style.display = "block";
  menu.style.left = oX + "px";
  menu.style.top = oY + "px";
  //阻止浏览器默认事件
  return false;//一般点击右键会出现浏览器默认的右键菜单,写了这句代码就可以阻止该默认事件。
 }
 document.onclick = function(e) {
   var e = e || window.event;
   menu.style.display = "none"
  }
 menu.onclick = function(e) {
  var e = e || window.event;
  e.cancelBubble = true;
 }
 // document.addEventListener("contextmenu",function(e){
 // var e = e || window.event;
 // e.preventDefault();
 // alert("menu");
 // },false)
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
利用JS实现数字增长
Jul 28 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 #Javascript
详解JS-- 浮点数运算处理
Nov 28 #Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 #Javascript
javascript实现无法关闭的弹框
Nov 27 #Javascript
js格式化时间的简单实例
Nov 27 #Javascript
浅谈jquery页面初始化的4种方式
Nov 27 #Javascript
js实现页面刷新滚动条位置不变
Nov 27 #Javascript
You might like
一个简单计数器的源代码
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
php扩展开发入门demo示例
2019/09/23 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue中监听返回键问题
2019/08/28 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python正则表达式使用经典实例
2016/06/21 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Django ORM filter() 的运用详解
2020/05/14 Python
如何通过python检查文件是否被占用
2020/12/18 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
美国标志性加大尺码时装品牌:Ashley Stewart
2016/12/15 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
2015年酒店服务员工作总结
2015/05/18 职场文书
换届选举主持词
2015/07/03 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python