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 相关文章推荐
jquery显示隐藏元素的实现代码
May 19 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
微信小程序页面生命周期详解
Jan 31 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 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源代码
2006/10/09 PHP
PHP安全性漫谈
2012/06/28 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
jQuery下通过replace字符串替换实现大小图片切换
2012/05/22 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
js转html实体的方法
2016/09/27 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[01:36]DOTA2完美大师赛趣味视频之与队友相处的十万个技巧
2017/11/19 DOTA
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python中import与from方法总结(推荐)
2019/03/21 Python
如何通过python实现全排列
2020/02/11 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
应届生会计求职信
2013/11/11 职场文书
童装店创业计划书
2014/01/09 职场文书
二年级学生评语大全
2014/04/23 职场文书
励志演讲稿大全
2014/08/21 职场文书
单位计划生育责任书
2015/05/09 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技