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 相关文章推荐
prototype class详解
Sep 07 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
node将geojson转shp返回给前端的实现方法
May 29 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
mysql 全文搜索 技巧
2007/04/27 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jquery获取radio值实例
2014/10/16 Javascript
PHP守护进程实例
2015/03/06 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
Python实现端口复用实例代码
2014/07/03 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
学python安装的软件总结
2019/10/12 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
python实现udp传输图片功能
2020/03/20 Python
毕业生自荐信
2013/12/14 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
MySQL触发器的使用
2021/05/24 MySQL