<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自定义鼠标右键弹出式菜单</title>
<style type="text/css">
<!--
.div1 { border-top:buttonface 1px solid;border-left:buttonface 1px solid;border-bottom:windowframe 1px solid;border-right:windowframe 1px solid;}
.div2 { border-top:window 1px solid;border-left:window 1px solid;border-bottom:buttonshadow 1px solid;border-right:buttonshadow 1px solid;}
.MouseOver {background-color:highlight;color:highlighttext;font-size: 12px;cursor:hand;font-size: 12px;}
.MouseOut {background-color:buttonface;color:buttontext;font-size: 12px;cursor:default;font-size: 12px;}
-->
</style>
<script language="javascript">
function PopupMouseRightButtonUpMenu()
{
if(MouseMenu.style.visibility=='visible') MouseMenu.style.visibility='hidden';
if (event.srcElement.tagName=='A' || event.srcElement.tagName=='TEXTAREA' || event.srcElement.tagName=='INPUT' || document.selection.type!='None')
return true;
else
{
if (event.clientX+150 > document.body.clientWidth) MouseMenu.style.left=event.clientX+document.body.scrollLeft-150;
else MouseMenu.style.left=event.clientX+document.body.scrollLeft;
if (event.clientY+DivH > document.body.clientHeight) MouseMenu.style.top=event.clientY+document.body.scrollTop-DivH;
else MouseMenu.style.top=event.clientY+document.body.scrollTop;
MouseMenu.style.visibility='visible';
}
return false;
}
function DrawMouseRightButtonUpMenu(){
DivH=2;
//oSelection = document.selection;
var HrStr='<tr><td align=\"center\" valign=\"middle\" height=\"2\"><TABLE border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"128\" height=\"2\"><tr><td height=\"1\" bgcolor=\"buttonshadow\"><\/td><\/tr><tr><td height=\"1\" bgcolor=\"buttonhighlight\"><\/td><\/tr><\/TABLE><\/td><\/tr>';
var MenuItemStr1='<tr><td align=\"center\" valign=\"middle\" height=\"20\"><TABLE border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"132\"><tr><td valign=\"middle\" height=\"16\" class=\"MouseOut\" onMouseOver=\"this.className=\'MouseOver\'\" onMouseOut=\"this.className=\'MouseOut\'\" onclick=\"'
var MenuItemStr2="<\/td><\/tr><\/TABLE><\/td><\/tr>";
var historyMenu=['window.history.back()\"> 后退','window.history.forward()\"> 前进'];
var SysMenu=['\"> 查找 <INPUT TYPE=\"text\" Size=\"10\" onkeypress=\"if (event.keyCode == 13) {MouseMenu.style.visibility=\'hidden\';var temp = this.value; this.value = \'\';return findInPage(temp)}\";\'>',
'document.execCommand(\'SelectAll\')\"> 全选',
'MouseMenu.style.visibility=\'hidden\';document.execCommand(\'SaveAs\',\'true\')\"> 另存为 ...',
'location.replace(\'view-source:\'+location.href)\"> 查看源文件',
'MouseMenu.style.visibility=\'hidden\';window.print()\"> 打印',
'window.location.reload()\"> 刷新'];
var MenuStr='';
for(i=0;i<historyMenu.length;i++)
{
MenuStr+=MenuItemStr1+historyMenu[i]+MenuItemStr2;
DivH+=20;
}
MenuStr+=HrStr;
for(i=0;i<arguments.length;i++)
{
MenuStr+=MenuItemStr1+arguments[i]+MenuItemStr2;
DivH+=20;
}
if(arguments.length>0)
{
MenuStr+=HrStr;
DivH+=2;
}
for(i=0;i<SysMenu.length;i++)
{
MenuStr+=MenuItemStr1+SysMenu[i]+MenuItemStr2;
DivH+=20;
}
var aboutMenu=['MouseMenu.style.visibility=\'hidden\';alert(\'http:\/\/www.playyuer.com\\nmailto:playyuer@263.net\')"> 关于 ...']
MenuStr+=HrStr;
for(i=0;i<aboutMenu.length;i++)
{
MenuStr+=MenuItemStr1+aboutMenu[i]+MenuItemStr2;
DivH+=20;
}
var MenuTop = '<DIV id=\"MouseMenu\" class=\"div1\" style=\"position:absolute; left:0px; top:0px; width=150;height='+DivH+'; z-index:1; visibility:hidden;\">\n' +
'<TABLE border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"div2\">\n' +
'<tr>\n' +
'<td bgcolor=\"' + MenuBarColor+ '\" width=\"50\" valign=\"bottom\" align=\"center\" bgcolor=\"buttonface\">\n' +
'<\/td>\n'+
'<td bgcolor=\"buttonface\">\n'+
'<TABLE border=\"0\" cellpadding=\"0\" cellspacing=\"0\">';
var MenuBottom = '<\/TABLE><\/td><\/tr><\/TABLE><\/DIV>';
document.write(MenuTop+MenuStr+MenuBottom);
//prompt('aa',MenuTop+MenuStr+MenuBottom)
document.body.oncontextmenu=new Function('return PopupMouseRightButtonUpMenu();');
document.body.onclick=new Function('if(event.srcElement.tagName !=\'INPUT\') MouseMenu.style.visibility=\'hidden\'');
document.body.onscroll=new Function('MouseMenu.style.visibility=\'hidden\';');
document.body.onselectstart=new Function('MouseMenu.style.visibility=\'hidden\';');
window.onresizestart=new Function('MouseMenu.style.visibility=\'hidden\';');
}
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == '')
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert('文档搜索完毕。');
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart('character', 1);
txt.moveEnd('textedit');
}
if (found) {
txt.moveStart('character', -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert('文档搜索完毕。');
}
}
return false;
}
</script>
</head>
</html>
分享到：
相关推荐
实现自定义右键菜单主要依赖于JavaScript，这是一种广泛使用的客户端脚本语言，用于控制网页的行为。通过监听鼠标事件，如`contextmenu`（右键点击），我们可以阻止浏览器显示默认菜单，然后动态创建并显示我们自己...
本项目聚焦于利用高德地图js-api实现绘制覆盖物，以及自定义右键菜单的功能。 首先，我们来探讨“绘制覆盖物”这一概念。在高德地图API中，覆盖物是指可以在地图上绘制的各种图形，如点、线、面等。在这个项目中，...
vue自定义右键菜单 -vue2版 vue自定义右键菜单 js右键菜单
总结起来，禁止鼠标右键和在SVG中自定义右键菜单涉及到JavaScript事件处理和DOM操作。通过监听`contextmenu`事件并调用`preventDefault()`方法，可以阻止浏览器的默认右键菜单。而在SVG中，我们可以结合CSS和...
### Vue + Element UI 添加自定义右键菜单的知识点解析 #### 一、概述 本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件...
通过以上讲解，我们了解了如何使用JavaScript自定义右键菜单，以及如何扩展至多级菜单。这只是一个基础的实现，实际开发中可能需要结合具体需求进行优化和扩展。希望这个教程对你有所帮助，让你能够创建出符合项目...
在本文中，我们将深入探讨如何使用ECharts 2.2.7版本实现组织结构图（Tree）以及自定义右键菜单，以帮助你更好地理解和应用这一功能。 首先，组织结构图在ECharts中是一种层次结构数据的展示方式，常用于表示公司、...
以下是使用Vue实现自定义右键菜单的详细步骤： 1. **事件监听**： 在Vue组件的模板中，你需要找到需要添加右键菜单的元素，并绑定`@contextmenu.prevent`事件。这个事件会阻止浏览器默认的右键菜单弹出。例如，在...
在JavaScript（JS）中，自定义右键菜单是一项常见的需求，尤其在开发Web应用程序时，为了提供更加个性化和功能丰富的用户体验。默认情况下，浏览器提供的右键菜单只包含基本的选项，如“复制”、“粘贴”等。通过...
IE右键菜单通常包括诸如“复制”、“粘贴”、“保存图片为”等常见功能，而使用JavaScript，开发者可以自由设计类似这样的菜单项，并根据需要添加更多自定义选项。 JavaScript是一种广泛应用于Web开发的脚本语言，...
标题提到的"flex自定义右键菜单 完全屏蔽"是指在Flex应用程序中，不仅实现对默认右键菜单的完全屏蔽，还允许开发者根据自己的需求创建并应用自定义的右键菜单。这种方法避免了使用JavaScript进行跨域通信来实现屏蔽...
《SpreadJS 自定义右键菜单实现详解》 SpreadJS 是一款功能强大的 HTML5 表格控件，它提供了丰富的功能，使用户能够在浏览器中创建、编辑和显示电子表格。在这个"spreadjs_自定义右键菜单-demo.zip"压缩包中，我们...
总的来说，JavaScript自定义右键菜单插件提供了一种简单易用的方式，让开发者能够方便地创建和控制网页上的右键菜单，满足各种定制化需求。通过理解其工作原理和提供的API，你可以轻松地将这种功能集成到自己的项目...
本项目“jQuery自定义右键弹出菜单代码”就是利用jQuery来实现一种类似于电脑桌面的右键菜单功能，当用户在网页上右击鼠标时，会弹出一个具有多种选项的下拉菜单，提供了良好的用户体验。 首先，我们要了解jQuery的...
在Asp.net2.0开发中，自定义右键菜单控件是一个常见的需求，它可以为用户提供更加便捷的操作体验。这个源码示例提供了一个实现这一功能的方法，适用于各种Web控件，如DataGrid、ListView等。下面将详细介绍如何在Asp...
自定义右键菜单javascript+div,有详细注释，方便各位程序员修改，css可以随意修改方便大家个性化菜单。
综上所述，通过使用jQuery库中的各种功能，结合CSS样式和JavaScript逻辑控制，我们可以实现一个功能完善、用户体验良好的自定义树状右键菜单。这不仅可以增加用户交互的便利性，也为页面增添了额外的功能性和视觉...
在Web开发中，为了提升用户体验与功能多样性，自定义右键菜单是一种常见的交互方式。本文将详细解析如何利用JavaScript来实现一个简单的自定义右键弹出菜单，并深入探讨其中涉及的关键技术点。 #### 实现原理 在...
但有时为了满足特定的交互需求，我们需要通过JavaScript自定义右键菜单。自定义右键菜单允许开发者提供更加丰富和个性化的菜单选项，以增强用户体验。 实现自定义右键菜单的原理是利用JavaScript中的`contextmenu`...