<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body id="body">
<div id="custom_menu" class="custom_menu">
<div><a href="#">班级管理</a></div>
<div><a href="#">人员管理</a></div>
<div><a href="#">报名管理</a></div>
<input type="button" value="关闭" onclick="closeMenu(this)">
</div>
<div id="useMenu" style="border:solid 1px red;padding: 2px">
<a href="javascript:void(0)" oncontextmenu="pupMenu(this)">右键出菜单1</a>
<a href="javascript:void(0)" oncontextmenu="pupMenu(this)">右键弹出菜单2</a>
<a href="javascript:void(0)" oncontextmenu="pupMenu(this)">右键弹出菜单3</a>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script language="javascript">
$(function() {
//菜单上 添加单击事件
$('#custom_menu').find('a').bind('click',function(){
delayTimeFun();
});;
});
// 菜单上 点击事件
function delayTimeFun(){
//执行父页面跳转
//window.parent.location="/test/test_delayAfterTime.action?"+$('#form').serialize();
alert("点击了确定按钮");
return false;
}
//创建弹出菜单
function pupMenu( obj ){
$('#custom_menu').css({top:$.pageY,left:$.pageX});
$('#custom_menu').show();
//还原其他链接背景色
$("a").css("background-color","white");
//当前点击链接背景色为red
$(obj).css("background-color","red");
}
//隐藏菜单
function closeMenu( obj ){
$(obj).parent().hide();
//还原 链接背景色
$("a").css("background-color","white");
}
window.onload = function(){
preventEvent( $('#useMenu').get(0) );
var useMenu = $('#useMenu').find('a');
for(var i=0;i<useMenu.length ;i++ ){
addEvent( useMenu.get(i));
}
// 阻止 右键弹出
function preventEvent(htmlObj ){
if(htmlObj.addEventListener){
htmlObj.addEventListener("contextmenu",function(event){
event.preventDefault();
},false);
}else{
htmlObj.attachEvent("oncontextmenu",function(event){
event = event || window.event;
event.returnValue = false;
}
);
}
}
//给对象添加事件
function addEvent(htmlObj ){
if(htmlObj.addEventListener){
htmlObj.addEventListener("contextmenu",function(event){
event.preventDefault();
menucon(event);
},false);
}else{
htmlObj.attachEvent("oncontextmenu",function(event){
event = event || window.event;
event.returnValue = false;
menucon(event,htmlObj);
}
);
}
}
//菜单位置处理
function menucon(event,htmlObj){
$('#custom_menu').css({top:(event.clientY-10),left:event.clientX});
$('#custom_menu').show();
//还原其他链接背景色
$("a").css("background-color","white");
//当前点击链接背景色为red
$(htmlObj).css("background-color","red");
}
}
</script>
</html>
分享到：
相关推荐
### JavaScript自定义右键弹出菜单实现方法 在Web开发中，为了提升用户体验与功能多样性，自定义右键菜单是一种常见的交互方式。本文将详细解析如何利用JavaScript来实现一个简单的自定义右键弹出菜单，并深入探讨...
在这个“labview 的右键弹出式菜单例子”中，我们将探讨如何在LabVIEW中实现用户友好的交互功能，即创建和使用右键弹出式菜单。 右键弹出式菜单是许多应用程序中的常见功能，它允许用户通过鼠标右键点击来触发一...
这个"js固定区块右键弹出菜单代码.zip"压缩包包含了一个实现此类功能的代码示例。在这个项目中，开发者可以学习如何利用JavaScript来监听鼠标事件，特别是在固定区块上触发右键点击时，展示一个自定义的菜单。 首先...
本文将深入探讨如何使用易语言这一国产编程语言来实现右键弹出菜单的功能，包括两种不同的实现方法：DLL命令实现和易语言菜单实现。 首先，我们来看DLL（动态链接库）命令实现。DLL是一种可执行代码的库，可以在多...
idea激活码 基于java的开发源码-右键弹出菜单源码.zip 基于java的开发源码-右键弹出菜单源码.zip 基于java的开发源码-右键弹出菜单...基于java的开发源码-右键弹出菜单源码.zip基于java的开发源码-右键弹出菜单源码.zip
在本项目中，我们关注的是如何使用jQuery实现一个右键弹出菜单的功能。这个功能通常用于增强用户体验，为用户提供快速访问特定操作的途径。 首先，我们需要了解jQuery中的事件处理。在这个场景下，我们将主要关注...
这个“鼠标右键弹出菜单VB6.0源代码.rar”压缩包包含了一个实例，演示了如何在VB6.0中实现这一功能。让我们详细探讨一下这个知识点。 1. **右键菜单的概念**：右键菜单，也称为快捷菜单或上下文菜单，是在用户对某...
总的来说，学习如何在PowerBuilder中实现鼠标右键弹出菜单是一项基础但重要的技能，它将帮助开发者创建更加用户友好的界面，提高应用的易用性。通过实践这个实例9，初学者不仅可以掌握具体的编程技巧，还能了解Power...
标题中的“针对Ztree的右键弹出菜单（jquery.popupSmallMenu.js）”是指在使用ZTree这个JavaScript组件时，如何实现右键点击节点时弹出自定义菜单的功能。ZTree是一个广泛使用的JavaScript树形控件，它允许开发者...
接下来，实现右键弹出菜单的关键在于捕获鼠标事件。在MFC中，我们需要重载CWnd类的On_WM_CONTEXTMENU()消息处理函数。这个函数会在用户在窗口内右键点击时被调用。我们需要在这个函数中判断点击位置是否在ListBox...
总的来说，实现“点击鼠标右键弹出自定义菜单”需要对Windows API有深入的理解，包括消息处理、菜单创建、用户交互等方面的知识。这不仅是一项技术挑战，也是一个优化用户体验的过程。在实际项目中，这种自定义菜单...
在TreeView上点击右键弹出菜单，同时鼠标点击处的TreeViewItem被选中，然后我们针对选中的数据进行处理。 不过，WPF的TreeView并没有提供右键单击选中的功能。我们需要自己去实现。 【思路】 最基本的思路是，在...
### C#中TreeView右键弹出菜单实现方法详解 #### 一、问题背景与目标 在C#开发中，我们经常需要为用户界面中的控件添加额外的功能，以提高用户体验和程序的可用性。其中，TreeView 控件因其直观地表示层次结构数据...
那么我们如何让我们的程序可以有自己的鼠标右键弹出式菜单呢？本资源包含的源程序代码将为您解答。 本资源压缩包内包含实现此功能的所有代码（不含控件），简单修改即可适应您的要求。
C# ContextMenu，上下文菜单，在窗体正文区点击右键弹出的菜单，支持多层次显示的右键菜单，大多数的窗体都具备类似的菜单效果，在C#中使用这种菜单，也是比较基本的吧，因此本例子对C#初学者来说，可能比较实用吧。
本文将深入探讨如何在MFC应用中实现右键弹出菜单，以及为何推荐使用`CONTEXTMENU`事件而非`RBUTTONUP`。 首先，右键弹出菜单在用户界面设计中起着至关重要的作用，它为用户提供了一种快捷的方式来访问特定的功能或...
在Qt框架中，实现鼠标右键点击弹出菜单是一项常见的需求，这主要涉及到信号与槽机制、QMenu类以及QAction类的使用。下面将详细解释如何在Qt5中实现这一功能。 首先，QMenu是Qt中用于创建下拉菜单或弹出菜单的类，而...
通过研究这个"很酷的右键弹出菜单"，我们可以学习到如何利用前端技术实现一个功能强大且视觉效果出众的交互元素，这对于提升网站的用户体验和界面设计水平非常有帮助。同时，这也是一个实践JavaScript事件处理、动态...
一、在资源编辑器中建立一个菜单资源 新建一个菜单资源，比如...此菜单有一项两层，即有一个可弹出的菜单项，而此菜单项的弹出内容即为将要建立的弹出式菜单的内容。至于每一个菜单项的消息映射，与一般的菜单相同。
//调用showContextMenu方法显示菜单 说明：如果这儿不加上这条语句的话，第一次点击右键时只能生成菜单，但是显示不出菜单，下次点击右键Menu菜单才能弹出。 //menu._showContextMenu(X,Y,tree.getItem(id).span....