js 模拟windows右键功能

flycnc 2011-12-17 02:01:01
请高手们帮忙看一下，“打开”功能怎么写。右键点url链接，点“打开”就转向该url页面。url的位置、个数都不确定，js能直接捕获鼠标右键所点击的链接吗？


=====================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body, td, th {
font-size: 12px;
}
html, body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
width:180px;
height:100%;
background-color:#4180b6;
SCROLLBAR-FACE-COLOR: #c6d3eb;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #395186;
SCROLLBAR-3DLIGHT-COLOR: #395186;
SCROLLBAR-ARROW-COLOR: #330000;
SCROLLBAR-TRACK-COLOR: #e2e7f3;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
overflow-x:hidden;
}

#RightKey {
position:absolute;
display:none;
left:41px;
top:152px;
width:80px;
z-index:999;
}
div.RightKeyCss {
position: absolute;
filter: Alpha(Opacity='95');
display:inline;
background-color: #D4D0C8;
border: 2px outset #FFFFFF;
width: 0;
height: 0;
padding:1
}
-->
</style>
<script>
function RightKeyDown(){
var x;
var y;
var isNav = (navigator.appName.indexOf("Netscape") !=-1);
x = (isNav) ? E.pageX : event.clientX;
y = (isNav) ? E.pageY : event.clientY;
x=x+4;
y=y-2;
if((document.body.clientWidth-80-x)<0){x=x-90;}
document.getElementById("RightKey").style.display='inline';
document.getElementById("RightKey").style.left=x;
document.getElementById("RightKey").style.top=y;
}
function RightKeyhide(){
document.getElementById('RightKey').style.display='none';
}
</script>
</head>
<body oncontextmenu="RightKeyDown();return false;" onclick="RightKeyhide();">
<div id="RightKey" class="RightKeyCss" onclick="this.style.display='none';">
<table width="100%" border="0" cellspacing="1" cellpadding="1" style="line-height:120%">
<tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">
<td height="18" valign="middle" onclick="javascript:location.reload();" style="padding-left:10px; padding-top:2px;">打开</td>
</tr>
<tr>
<td height="1px" style="background-color:#999;"></td>
</tr>
<tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">
<td height="18" valign="middle" onclick="javascript:location.reload();" style="padding-left:10px; padding-top:4px;">刷新</td>
</tr>
<tr>
<td height="1px" style="background-color:#999;"></td>
</tr>
<tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">
<td height="18" valign="middle" style="padding-left:10px; padding-top:4px;">复制</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">
<td height="18" valign="middle" style="padding-left:10px; padding-top:1px;padding-bottom:1px;">粘贴</td>
</tr>
<tr>
<td height="1px" style="background-color:#999;"></td>
</tr>
<tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">
<td height="18" valign="middle" style="padding-left:10px; padding-top:4px;padding-bottom:1px;">属性</td>
</tr>
</table>
<!--
<li><a href="javascript:location.reload();">刷新</a></li>
<li><a href="#"> 复制 </a></li>
<li><a href="#"> 粘贴 </a></li>
//-->
</div>
<h1><p align="center" style="line-height:300px;"><a href="http://www.csdn.net/">csdn</a></p></h1>
</body>
</html>
...全文
327 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
flycnc 2011-12-18
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 p2227 的回复:]
很容易用的，现在一些高手写的东西都封装得很好，甚至页面只需要加入一个写好的js就完全有你想要的效果了。
[/Quote]

崇拜+向往啊~~~上次看到一个js代码，复制到任意IE地址栏里，可以让网页上的图片都跑动起来，以前想都没想到。。。
p2227 2011-12-17
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 flycnc 的回复:]

可以了，非常感谢p2227！

我没好好学过，控件也不会，目前能用就行，以后再改进了，谢谢。
[/Quote]很容易用的，现在一些高手写的东西都封装得很好，甚至页面只需要加入一个写好的js就完全有你想要的效果了。
flycnc 2011-12-17
  • 打赏
  • 举报
 回复
可以了，非常感谢p2227！

我没好好学过，控件也不会，目前能用就行，以后再改进了，谢谢。
p2227 2011-12-17
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 flycnc 的回复:]

另外“复制”、“粘贴”js怎么写？好像都很麻烦的样子。。。
[/Quote]是的，特别要兼容各大浏览器，建议找个现成的控件吧。我见很多现成的代码要兼容地复制都用上了flash
p2227 2011-12-17
  • 打赏
  • 举报
 回复
其实你这段代码浏览器兼容性也不咋样，建议找个现成的右键菜单控件
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

<!--

body, td, th {

font-size: 12px;

}

html, body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

width:180px;

height:100%;

background-color:#4180b6;

SCROLLBAR-FACE-COLOR: #c6d3eb;

SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;

SCROLLBAR-SHADOW-COLOR: #395186;

SCROLLBAR-3DLIGHT-COLOR: #395186;

SCROLLBAR-ARROW-COLOR: #330000;

SCROLLBAR-TRACK-COLOR: #e2e7f3;

SCROLLBAR-DARKSHADOW-COLOR: #ffffff;

overflow-x:hidden;

}



#RightKey {

position:absolute;

display:none;

left:41px;

top:152px;

width:80px;

z-index:999;

}

div.RightKeyCss {

position: absolute;

filter: Alpha(Opacity='95');

display:inline;

background-color: #D4D0C8;

border: 2px outset #FFFFFF;

width: 0;

height: 0;

padding:1

}

-->

</style>

<script>

var rce; //====================储存右击时的对象

function RightKeyDown(event){

	event = event || window.event;

	rce = event.target || event.srcElement;



var x;

var y;

var isNav = (navigator.appName.indexOf("Netscape") !=-1);

x = (isNav) ? E.pageX : event.clientX;

y = (isNav) ? E.pageY : event.clientY;

x=x+4;

y=y-2;

if((document.body.clientWidth-80-x)<0){x=x-90;}

document.getElementById("RightKey").style.display='inline';

document.getElementById("RightKey").style.left=x;

document.getElementById("RightKey").style.top=y;

}

function RightKeyhide(){

document.getElementById('RightKey').style.display='none';

}



opurl = function(){

	if(rce.href){ 

		window.location.href = rce.href;

	}

}

</script>

</head>

<body oncontextmenu="RightKeyDown();return false;" onclick="RightKeyhide();">

  <div id="RightKey" class="RightKeyCss" onclick="this.style.display='none';">

  <table width="100%" border="0" cellspacing="1" cellpadding="1" style="line-height:120%">

  <tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">

  <td height="18" valign="middle" onclick="opurl()" style="padding-left:10px; padding-top:2px;">打开</td>

  </tr>

  <tr>

  <td height="1px" style="background-color:#999;"></td>

  </tr>

  <tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">

  <td height="18" valign="middle" onclick="javascript:location.reload();" style="padding-left:10px; padding-top:4px;">刷新</td>

  </tr>

  <tr>

  <td height="1px" style="background-color:#999;"></td>

  </tr>

  <tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">

  <td height="18" valign="middle" style="padding-left:10px; padding-top:4px;">复制</td>

  </tr>

  <tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">

  <td height="18" valign="middle" style="padding-left:10px; padding-top:1px;padding-bottom:1px;">粘贴</td>

  </tr>

  <tr>

  <td height="1px" style="background-color:#999;"></td>

  </tr>

  <tr onmouseover="this.style.backgroundColor='#000080';this.style.color='#ffffff';this.style.cursor='default';" onmouseout="this.style.backgroundColor='#D4D0C8';this.style.color='#000000';">

  <td height="18" valign="middle" style="padding-left:10px; padding-top:4px;padding-bottom:1px;">属性</td>

  </tr>

  </table>

  <!--

  <li><a href="javascript:location.reload();">刷新</a></li>

  <li><a href="#"> 复制 </a></li>

  <li><a href="#"> 粘贴 </a></li>

  //-->  

  </div>

<h1><p align="center" style="line-height:300px;"><a href="http://www.csdn.net/">csdn</a></p></h1>

</body>

</html>
flycnc 2011-12-17
  • 打赏
  • 举报
 回复
另外“复制”、“粘贴”js怎么写？好像都很麻烦的样子。。。
js模拟windows系统自定义多级右键菜单
js模拟系统右键效果，在网页中右击鼠标，弹窗类似桌面上右击类似效果，很不错，
windows系统自定义多级右键菜单-JS
js模拟windows系统自定义多级右键菜单
基于Threejs/Webgl三维实时数据&车辆路径导航功能 项目实战一
针对webgl的库threejs框架项目功能实战讲解 实时数据功能：对生产设备设施、传感器、开关控制的实时数据和运行状态查看，在三维场景中实时数据和状态，根据报警级别显示不同设备颜色。 车辆路径导航：工厂车辆位置...
html+css+js仿windows桌面、windows窗口
用html、css、js实现的windows桌面和窗口。包括开始菜单、状态蓝、窗口等。和windows系统操作方法一样，如双击图标打开窗口，不用的窗口最小化到状态蓝，右击桌面图标可打开右键菜单。开始菜单中附件---游戏中有常见...
web-window:windows 7 桌面的web版
本项目主要是业余时间写着玩的，主要是模拟windows 7的桌面，实现了一部分功能，打开应用，批量选择，右键刷新，窗口放大缩小，拖拽顶部放大...还有很多细节功能。 主要运用了canvas、jquery，属于比较基础的应用。 ...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章