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 相关文章推荐
C#中使用迭代器处理等待任务
Jul 13 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
总结javascript三元运算符知识点
Sep 28 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
JavaScript实现打字游戏
Feb 19 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
php获取post中的json数据的实现方法
2011/06/08 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
python logging日志模块以及多进程日志详解
2018/04/18 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python如何给函数库增加日志功能
2020/08/04 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
幼儿园小班教学反思
2014/02/02 职场文书
园林技术专业求职信
2014/07/28 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
小学校本教研总结
2015/08/13 职场文书
《风筝》教学反思
2016/02/23 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android