编程 Javascript

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

js实现右键菜单功能

- Author -

简单成书

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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