用Popup对象构建网页右键菜单

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_30849403

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tyrael007/archive/2006/08/05/468821.html

本文介绍了一种使用JavaScript和HTML创建网页右键菜单的方法。通过监听鼠标右键点击事件并显示自定义菜单，用户可以方便地选择链接进行跳转。示例中包括了中关村在线、电脑爱好者等网站链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单击这里下载这段视频。

代码如下：

1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
2 < html >
3 < head >
4 < TITLE > Popup对象实现右键菜单 </ TITLE >
5 < script language ="JavaScript" >
6 var oPopup = window.createPopup();
7 function contextMenu()
8 {
9
10      var left = event.offsetX + 10 ;
11      var top = event.offsetY + 10 ;
12     oPopup.document.body.innerHTML = oContext.innerHTML;
13     oPopup.show(left, top, 120 , 80 , window.document.body);
14
15 }
16 </ script >
17 </ head >
18 < body oncontextmenu ="contextMenu(); return false;" >
19 < h1 > Popup对象实现右键菜单 </ h1 >
20 单击鼠标右键查看效果
21 < div ID ="oContext" style ="DISPLAY: none; BACKGROUND: #e4e4e4; " >
22      < div onmouseover ="this.style.background='gold'"
23          onmouseout ="this.style.background='#e4e4e4'"
24        <span onclick ='parent.location.href="http://www.zol.com.cn"' >
25     中关村在线 </ span >
26      </ div >
27      < div onmouseover ="this.style.background='gold'"
28          onmouseout ="this.style.background='#e4e4e4'"
29     <span onclick ="parent.location.href='http://www.cfan.com.cn'" >
30     电脑爱好者 </ span >
31      </ div >
32      < div onmouseover ="this.style.background='gold';"
33          onmouseout ="this.style.background='#e4e4e4';" >
34      < span onclick ="parent.location.href='http://www.sina.com.cn'" >
35     新浪网 </ span >
36      </ div >
37      < div onmouseover ="this.style.background='gold'"
38          onmouseout ="this.style.background='#e4e4e4'"
39     <span onclick ="parent.location.href='http://www.xinhuanet.com'" >
40     新华网 </ span >
41      </ div >
42
43 </ div >
44 </ body >
45 </ html >

转载于:https://www.cnblogs.com/tyrael007/archive/2006/08/05/468821.html