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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
JavaScript面向对象之体会[总结]
Nov 13 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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变量范围介绍
2012/10/15 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
python实现对excel进行数据剔除操作实例
2017/12/07 Python
分享vim python缩进等一些配置
2018/07/02 Python
python代码实现图书管理系统
2020/11/30 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
物流专业大学应届生求职信
2013/11/03 职场文书
外贸学院会计专业应届生求职信
2013/11/14 职场文书
基层干部十八大感言
2014/01/19 职场文书
服务之星事迹材料
2014/05/03 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电