js实现右键菜单功能

最新推荐文章于 2021-11-15 23:04:33 发布
最新推荐文章于 2021-11-15 23:04:33 发布
阅读量166 收藏
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/u/3063271/blog/796867
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

这篇文章主要为大家详细介绍了js实现右键菜单功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文解决的问题：1、实现右键菜单功能代码；2、阻止默认事件的实际应用。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!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>

转载于:https://my.oschina.net/u/3063271/blog/796867

weixin_33696822
关注
JS实现页面右键菜单
Sun_blog
05-17 3784
JS实现页面右键菜单
html js 屏蔽原有右键功能菜单，自定义打造专属右键菜单
09-21
html js 屏蔽原有右键功能菜单，自定义右键菜单
js_实现右键菜单功能
妞妞的专栏
01-08 1714
/***实现右键菜单功能*/--%>                                                            根目录            菜单一            菜单二                                              
php 右键下拉菜单,js实现右键菜单功能
weixin_35253177的博客
03-24 158
本文解决的问题：1、实现右键菜单功能代码；2、阻止默认事件的实际应用。右键菜单#menu {position: fixed;left:0;top:0;width:200px;height: 400px;background-color: blue;display: none;}var menu = document.getElementById("menu");document.oncontext...
js实现页面右键自定义功能
蚂蚁小帅哥的专栏
01-14 1393
js实现页面右键自定义功能 frank index #itemMenu { width: 120px; height: 69px; position: fixed; display: none; } #itemMenu table tr{ background: #0080ff; } div{ background: #bbb; margin: 2px auto; }
JS 右键菜单功能
生活要快乐 - 魏言
06-27 677
JS实现右键菜单 <!-- function csMenu(_object, _menu){ this.IEventHander = null; this.IFrameHander = null; this.IContextMenuHander = null; this.Show = function(_menu
基于JavaScript实现右键菜单和拖拽功能
10-21
在本文中，我们将深入探讨如何利用JavaScript实现右键菜单功能和拖拽功能。 首先，让我们关注右键菜单功能的实现。在HTML中，我们创建了一个id为"menu"的div元素，它在默认情况下是隐藏的。当用户右键点击时，通过`...
原生Vue 实现右键菜单组件功能
10-15
在Vue.js中，实现右键菜单组件功能可以让用户在页面上的特定元素上通过鼠标右键触发自定义的操作列表。这篇文章将详细介绍如何原生地在Vue中创建一个右键菜单组件，以及如何处理点击菜单以外区域时隐藏菜单的操作。 ...
JS 右键菜单
梦想家博客
03-30 410
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { ma
使用JS开发桌面端应用程序NW.js-1-Menu菜单的使用小记
weixin_30628077的博客
05-12 500
前言 本文主要内容为nw.js官方文档中没有提到，而在实际入手开发过程中才碰到的问题以及经验的汇总。 详情请查看官方文档：http://docs.nwjs.io/en/latest/References/Menu/ 1. MenuStrip与ContextMenu 在聊nwjs中的Menu之前先说下在传统window桌面端应用开发中的两种常见的菜单。 windows中的MenuStrip 第一种：...
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1458
Document
运用js实现自定义右键菜单的功能
浮生离梦的博客
05-16 5507
需求分析：设计一个自定义菜单，默认是隐藏的。当单击右键的时候，在浏览器中可以打开，进行显示菜单。当点击屏幕任意位置的时候，自定义的右键菜单可以关闭。 设计思路：先是获取菜单元素，通过return false 关闭浏览器自带的菜单。获取鼠标的坐标以及获取当前窗口的宽度和高度，通过Math函数的min方法，进行调整宽度和高度。当鼠标再次点击的时候，自定义菜单的样式设置为隐藏。 实现代码： ...
JS - 实现右键菜单功能
王嘞嘞的前端之路
03-09 1385
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&gt;&lt;/title&gt;    &lt;style&gt;        #youjiancaidan{            border: 1p
JS添加右键菜单
漫天雪_昆仑巅
04-10 3520
在前端开发的时候，会用到“右键菜单”，如给div添加右键菜单等， 示例： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://libs.baidu.com/jqu...
js实现浏览器右键菜单，屏蔽默认菜单
http://kingim.cn/
08-28 9240
<div id="mouse" style="width:500px;height:200px;background:#E8FFE8;border:2px solid #336699;"> </div> <div id="menu" style="display:none; position: absolute; color:red; border-radius: 3px;background-co
去除右键菜单里的文件夹同步选项
weixin_33955681的博客
09-20 220
我们在安装Microsoft Office 2010之后，鼠标右键菜单会多出共享文件夹同步选项，右键菜单选项过多，也不利于我们操作，而且影响开机速度，今天我就来教大家如何去除鼠标右键菜单中的共享文件夹同步选项。 操作步骤 1. 鼠标点击桌面左下角开始按钮，选择控制面板。然后点击卸载程序。 2. 找到Microsoft Office Professio...
jQuery,JS实现自定义鼠标右键菜单
邓占勇的博客
08-21 5204
鼠标点击事件基本上是每个页面必不可少的，绝大多数情况下都是普通的鼠标左键点击，即可以通过click()方法来实现。 但是我们在很多情况下我们想通过鼠标右键来实现一些功能的实现，比如说一个表格数据，表格的每行数据都可以进行删除、修改、发送等等操作，如果采用在每行都添加这些操作按钮的话，这样做起来很麻烦，并且占据了很多空间。如果我们队每行数据可以采用鼠标右击的方式，然后弹出操作选择模块。这样整个页面...
JavaScript实现右键菜单及树形结构操作示例
通过创建一个dTree对象来构建树形结构，并结合jQuery库的contextMenu插件来为指定元素添加右键菜单功能。菜单包括添加、修改和删除操作，同时在选择节点时会将选中的节点ID传递给输入框`jdid`。代码中还包含了一个名...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值