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 escape,unescape解决中文乱码问题的方法
May 26 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
Vue中inheritAttrs的使用实例详解
Dec 31 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
15种PHP Encoder的比较
2007/03/06 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
浅析php单例模式
2014/11/25 PHP
[原创]php简单防盗链验证实现方法
2016/07/09 PHP
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
初识Node.js
2015/03/20 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[46:55]完美世界DOTA2联赛决赛 FTD vs Phoenix 第三场 11.08
2020/11/11 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
python的concat等多种用法详解
2018/11/28 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Python logging模块原理解析及应用
2020/08/13 Python
Python extract及contains方法代码实例
2020/09/11 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
德国家具折扣店:POCO
2020/02/28 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
食品流通安全承诺书
2014/05/22 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
国家助学金感谢信
2015/01/21 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js