<!DOCTYPE html>
<html>
<head>
<title>JS实现自定义右键菜单</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<script src="http://api.51ditu.com/js/ajax.js"></script>
<style type="text/css">
#container {
background:#b36637;
text-align : center;
width : 500px;
height : 500px;
border : 1px solid blue;
margin : 0 auto;
}
.skin {
background:#ffff64;
width : 180px;
border : 1px solid gray;
padding : 2px;
visibility : hidden;
position : absolute;
}
div.menuitems {
margin : 2px 0;
}
div.menuitems a {
color : #000000;
text-decoration : none;
}
div.menuitems:hover {
border:1px solid gray;
width:160px;
background-color : #ffffff;
}
</style>
<script>
window.onload = function() {
var container = document.getElementById('container');
var menu = document.getElementById('menu');
/*显示菜单*/
function showMenu() {
var evt = window.event || arguments[0];
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge = container.clientWidth+evt.clientX;
var bottomedge = container.clientHeight+evt.clientY;
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
else
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if (bottomedge < menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
else
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
/*设置菜单可见*/
menu.style.visibility = "visible";
LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);
}
/*隐藏菜单*/
function hideMenu() {
menu.style.visibility = 'hidden';
}
LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);
LTEvent.addListener(container,"contextmenu",showMenu);
LTEvent.addListener(document,"click",hideMenu);
}
</script>
</head>
<body>
<div id="menu" class="skin">
<div class="menuitems">
<a href="javascript:history.back();">后退</a>
</div>
<div class="menuitems">
<a href="javascript:history.back();">前进</a>
</div>
<hr>
<div class="menuitems">
<a href="http://api.51ditu.com/" target="_blank">地图api</a>
</div>
<div class="menuitems">
<a href="http://www.51ditu.com/traffic/index.html" target="_blank">实时交通</a>
</div>
<div class="menuitems">
<a href="http://www.51ditu.com" target="_blank">地图搜索</a>
</div>
<div class="menuitems">
<a href="http://nav.51ditu.com" target="_blank">驾驶导航</a>
</div>
<hr>
<div class="menuitems">
<a href="http://uu.51ditu.com" target="_blank">灵图UU</a>
</div>
<div class="menuitems">
<a href="http://lushu.51ditu.com" target="_blank">路书下载</a>
</div>
<hr>
<div class="menuitems">
<a href="http://www.lingtu.com" target="_blank">关于本站</a>
</div>
<div class="menuitems">
<a href="http://emap.51ditu.com/link/link.html" target="_bland">友情链接</a>
</div>
</div>
<div id="container">
<p>右键此区域</p>
</div>
</body>
</html>
相关推荐
1. 用户体验：默认的浏览器右键菜单虽然基础，但可能无法满足所有网站的需求。自定义右键菜单可以提供更符合网站特性的操作选项，提高用户的操作效率和满意度。 2. 功能扩展：通过自定义右键菜单，开发者可以添加...
"unigui右键菜单_一完善"这个主题，显然是关于如何在Unigui应用中实现和优化右键菜单的功能。 右键菜单在用户界面设计中起着重要的作用，它提供了一种快捷的方式来执行特定的操作。在Unigui中，右键菜单的实现涉及...
3. **创建右键菜单**：在 `contextmenu` 事件的回调函数中，阻止浏览器默认的右键菜单弹出，并自定义我们的菜单。这通常涉及到CSS样式的设计以及DOM元素的创建。可以使用 `event.preventDefault()` 阻止默认菜单，...
然而，有时候我们可能需要自定义特定的功能，比如右键菜单，来增强用户体验或提供更丰富的地图交互。 "OpenLayers扩展右键菜单"是一个项目，旨在帮助开发者为他们的OpenLayers地图应用添加自定义的右键上下文菜单。...
在IT行业中，树形菜单和右键菜单是两种常见的用户界面元素，它们为用户提供了一种组织和交互数据的有效方式。本文将深入探讨这两种菜单的概念、实现原理以及它们在实际项目中的应用，特别是如何在JavaScript环境下...
通过监听`contextmenu`事件并调用`preventDefault()`方法，可以阻止浏览器的默认右键菜单。而在SVG中，我们可以结合CSS和JavaScript创建自定义菜单，以提供更丰富的用户体验。这些技术广泛应用于各种Web应用程序，...
在网页设计中，创建一个兼容各种浏览器的右键菜单是一项重要的任务，因为它直接影响到用户的交互体验。HTML（超文本标记语言）是构建网页的基础，但默认情况下，它并不直接支持自定义的右键菜单。因此，为了实现这个...
因此，我们的第一步是在客户端（浏览器）使用JavaScript或jQuery来捕获这个事件，然后防止默认的浏览器右键菜单出现。 ```javascript document.addEventListener('contextmenu', function(event) { event....
JavaScript右键菜单的一个关键考虑是浏览器兼容性。由于不同的浏览器可能对事件处理和CSS样式支持程度不同，特别是老版本的Firefox（FF）和Internet Explorer（IE），开发者需要确保代码在这些浏览器中也能正常工作...
在Vue.js框架中，开发基于鼠标的右键菜单是一个常见的需求，这有助于增强用户交互体验。Vue组件化开发的优势在于可以将复杂的功能拆分成独立、可复用的单元，而"基于vue的鼠标右键菜单事件"组件正是这样一个实用的...
效果实现教程地址：https://blog.csdn.net/qq_27884377/article/details/82288166
然而，有时我们可能希望在`iframe`内禁用默认的右键菜单，以防止用户通过右键点击执行某些操作，比如复制、查看源代码等。标题"iframe里无右键菜单"正是针对这一需求，描述中提到的解决方案是创建一个既简单又实用的...
本文将深入探讨如何使用JavaScript实现右键菜单，特别是如何动态添加菜单项，并在菜单项中添加图标、文本以及处理点击事件。此外，我们还将讨论在不同浏览器（如IE、Firefox和Chrome）中的兼容性问题。 首先，右键...
本文将深入探讨如何利用JavaScript实现自定义鼠标右键菜单的功能。 首先，我们需要理解浏览器的默认行为。当用户在网页上点击鼠标右键时，通常会弹出一个包含基本浏览器操作（如"查看源代码"、"保存页面"等）的标准...
为了创建更复杂的自定义菜单，我们可以使用JavaScript来创建DOM元素，模拟出类似浏览器右键菜单的效果。这些元素通常会以弹出框或者下拉菜单的形式出现，用户可以选择其中的项来执行相应的操作。例如，我们可以创建...
在Java编程中，右键菜单（也称为上下文菜单）是一种常见的用户界面元素，它提供了一种方便的方式来响应用户在特定上下文中进行的操作，比如在桌面、文件浏览器或应用程序内部的右键点击。本资源“java右键菜单源码”...
在OpenLayers中，有时我们需要为用户提供更直观的交互方式，比如右键菜单，这就是我们要讨论的“OpenLayers右键菜单”。 OpenLayers默认并不提供内置的右键菜单功能，但可以通过自定义事件监听和扩展来实现。这个...
这种菜单可以替代或扩展浏览器默认的右键菜单，提供更加定制化的用户体验。 在描述中提到，“单击鼠标右键实现如IE右键效果的菜单”，这暗示了该菜单的设计目标是模仿Internet Explorer浏览器的右键菜单行为。IE...
在IT行业中，自定义右键菜单效果是一种常见的增强用户体验的技术，尤其在网页和桌面应用程序中。这个主题涉及到JavaScript、CSS以及可能的HTML等前端技术。QQ邮箱作为一个知名的在线邮件服务，其用户界面设计通常...
在这个例子中，我们阻止了浏览器的默认右键菜单行为，并在`contextmenu`事件触发时显示了一个包含“添加节点”和“删除节点”选项的自定义菜单。根据需要，你可以扩展这些功能以满足实际应用的需求。 总的来说，...