`
xylw
  • 浏览: 60218 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
文章分类
社区版块
存档分类
最新评论

如何实现浏览器上的右键菜单

阅读更多
首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单。思路可以有两个,一个是将焦点移开,还有一个就是点在网页的什么地方不会出现右键菜单,而且会响应鼠标点击消息。(哈哈,废话一大堆。思路吗?总要多想想才有的)   
 
 
想了想, 总结出的下面几种方法   
1、响应右键消息出一个ALERT框(还有点新鲜的东东没有)。   
2、响应右键消息后弹出一个新的窗口。将初始页的的焦点移开。   
可是经过试验后发现只有窗口出现在鼠标右击的位置时,才会没有浏览器的右键菜单出现。   
3、响应右键消息后弹出一个HTML的对话框。即使用showModalDialog来开启一个HTML对话框。使用这种方式可以让右键菜单不会出现。但是有一个问题是使用使用showModalDialog开启的对话框不会向使用Window.Open开启的对话框一样可以移出屏幕所在的范围。就是说始终可以看见有一个对话框出现在屏幕上。这条路也不能走了。   
4、呵呵,最后一招了,偶尔发现在Select上进行鼠标右击或左击都不会有反应。那么如果每次鼠标都点在Select上,不就不会出现浏览器的右键菜单了。   
 
下面就是一个例子,感兴趣的可以把下面的拷贝成Test.html,就可以看看效果了。
<HTML>    
<title>VFish Test</title>    
<script>    
var x, y;    
document.onmousemove=moveMouse    
document.onmousedown=click    
function moveMouse()    
{    
Layer1.style.left = event.clientX - 2;    
Layer1.style.top = event.clientY - 2;    
}    
function click()    
{    
if (event.button==2)    
{    
x = event.clientX;    
y = event.clientY;    
Layer1.style.visibility="";    
window.setTimeout("showMenu();", 500);
}    
else    
{    
HiddenPop();    
PopMenu.style.visibility='hidden';    
}    
}    
function showMenu()    
{    
PopMenu.style.left = x- 2;    
PopMenu.style.top = y- 2;    
PopMenu.style.visibility="";    
HiddenPop();    
}    
function HiddenPop()    
{    
Layer1.style.visibility='hidden';    
}    
</script>    
<BODY>    
在窗口中右击一下看看出什么:)    
<div id=Layer1 style="position:absolute; width:4px; height:4px; z-index:3; visibility: hidden">    
<select style="width:4"></select>    
</div>    
<div id=PopMenu style="position:absolute; width:100px; height:100px; z-index:1; visibility: hidden">    
<table border=2 width=100 >    
<TH align="center" color="sliver" onclick="">    
唯鱼的菜单    
</tH>    
<tr>    
<td>    
click it!:)    
</td>    
</tr>    
</table>    
</div>    
</BODY>    
</HTML>
分享到:
评论

相关推荐

    HTML兼容浏览器的右键菜单

    在网页设计中,创建一个兼容各种浏览器的右键菜单是一项重要的任务,因为它直接影响到用户的交互体验。HTML(超文本标记语言)是构建网页的基础,但默认情况下,它并不直接支持自定义的右键菜单。因此,为了实现这个...

    基于vue的鼠标右键菜单事件本组件提供右键菜单的显示和隐藏

    总结来说,"基于vue的鼠标右键菜单事件"组件是一个实现了鼠标右键触发菜单显示和隐藏功能的Vue组件。它展示了Vue的组件化开发思想,以及如何处理事件、自定义内容和样式。对于熟悉Vue.js的开发者,这个组件提供了...

    Web右键菜单 很不错的右键菜单

    1. 用户体验:默认的浏览器右键菜单虽然基础,但可能无法满足所有网站的需求。自定义右键菜单可以提供更符合网站特性的操作选项,提高用户的操作效率和满意度。 2. 功能扩展:通过自定义右键菜单,开发者可以添加...

    jQuery实现右键菜单源码

    本篇文章将深入探讨如何使用jQuery来实现一个右键菜单功能,这在许多交互式网页应用中是非常常见的需求。 首先,理解jQuery的核心概念是至关重要的。jQuery对象通过$()函数创建,它可以用来选择DOM元素、操作DOM、...

    echarts右键菜单实例 --- 不修改源码

    通过以上步骤,我们就能够在ECharts图表上实现一个自定义的右键菜单,而无需修改ECharts的源代码。这种方式允许我们充分利用ECharts的灵活性和强大的API,同时保持代码的简洁和可维护性。 在提供的压缩包文件 ...

    Openlayers扩展右键菜单

    5. **菜单逻辑**:菜单上的每个选项都需要关联一个操作,这可以通过JavaScript函数实现。这些函数可以执行地图相关的任务,如获取点击位置的坐标、打开一个新的图层、执行测量等。 6. **模块化和封装**:为了代码的...

    js树形菜单加右键菜单

    总的来说,结合使用JavaScript实现的树形菜单和右键菜单,可以提供一个高效且直观的用户界面,让用户在复杂的层级数据中进行导航和操作。这种技术在内容管理系统(CMS)、文件管理工具以及其他需要展现层次关系的Web...

    右键菜单(javaScript)

    标题中的“右键菜单(javaScript)”指的是使用JavaScript编程语言实现的网页上下文菜单,即当用户在网页上点击鼠标右键时出现的功能性菜单。这种菜单可以替代或扩展浏览器默认的右键菜单,提供更加定制化的用户体验。...

    HTML实现右键菜单

    在实现右键菜单时,我们可以利用jQuery的事件监听功能,如`$(document).on('contextmenu', function(event) {})`,来捕获用户的右键点击事件。在这个回调函数中,我们可以阻止浏览器默认的右键菜单显示(`event....

    网页右键菜单封装类 实现web右点击菜单

    "网页右键菜单封装类 实现web右点击菜单"这个主题聚焦于如何通过编程方式创建和定制网页上的右键上下文菜单。这涉及到JavaScript、HTML以及可能的CSS技术,特别是对于事件处理和DOM操作的理解。 首先,JavaScript是...

    iframe里无右键菜单

    标题"iframe里无右键菜单"正是针对这一需求,描述中提到的解决方案是创建一个既简单又实用的方法来实现这一功能。 `contextmenu`是HTML5中的一个事件,它与右键菜单相关。当用户在页面上执行右键点击时,浏览器会...

    html js 屏蔽原有右键功能菜单,自定义打造专属右键菜单

    html js 屏蔽原有右键功能菜单,自定义右键菜单

    js右键菜单,菜单项由js动态添加,纯js调用

    本文将深入探讨如何使用JavaScript实现右键菜单,特别是如何动态添加菜单项,并在菜单项中添加图标、文本以及处理点击事件。此外,我们还将讨论在不同浏览器(如IE、Firefox和Chrome)中的兼容性问题。 首先,右键...

    禁止鼠标右键及svg中自定义右键菜单

    通过监听`contextmenu`事件并调用`preventDefault()`方法,可以阻止浏览器的默认右键菜单。而在SVG中,我们可以结合CSS和JavaScript创建自定义菜单,以提供更丰富的用户体验。这些技术广泛应用于各种Web应用程序,...

    高德地图实现绘制覆盖物,自定义右键菜单

    2. 在事件触发时,阻止浏览器默认的右键菜单显示,通常是通过`event.preventDefault()`。 3. 创建自定义菜单,这可能是一个浮动的div元素,包含多个操作选项,如删除当前覆盖物。 4. 为每个菜单项绑定点击事件,根据...

    JS设置鼠标右键菜单

    本文将深入探讨如何利用JavaScript实现自定义鼠标右键菜单的功能。 首先,我们需要理解浏览器的默认行为。当用户在网页上点击鼠标右键时,通常会弹出一个包含基本浏览器操作(如"查看源代码"、"保存页面"等)的标准...

    自定义右键菜单效果

    实现自定义右键菜单主要依赖于JavaScript,这是一种广泛使用的客户端脚本语言,用于控制网页的行为。通过监听鼠标事件,如`contextmenu`(右键点击),我们可以阻止浏览器显示默认菜单,然后动态创建并显示我们自己...

    Js右键菜单,js菜单,漂亮的Js右键导航,好用的Js右键菜单

    本文将深入探讨"Js右键菜单,js菜单,漂亮的Js右键导航,好用的Js右键菜单"这一主题,帮助开发者了解如何利用JavaScript实现高效、美观的右键菜单功能。 一、JavaScript右键菜单的基本原理 在网页上,右键点击事件...

    网页添加右键菜单网页添加右键菜单

    为了创建更复杂的自定义菜单,我们可以使用JavaScript来创建DOM元素,模拟出类似浏览器右键菜单的效果。这些元素通常会以弹出框或者下拉菜单的形式出现,用户可以选择其中的项来执行相应的操作。例如,我们可以创建...

    javascript右键菜单,兼容各种浏览器

    javascript右键菜单,兼容各种浏览器

Global site tag (gtag.js) - Google Analytics