自定义的右键菜单可否只在特定区域显示？如何实现？

自定义菜单在TEXTAREA中：<HTML>
<HEAD>
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<TITLE>Basic Popup Example</TITLE>
<SCRIPT LANGUAGE="JScript">
// Create the popup object. For predictable results, always create
// a global popup object.
var oPopup = window.createPopup();
function openPopup()
{
    // The popup object exposes the document object and its properties.
    var oPopBody = oPopup.document.body;
    // The following HTML that populates the popup object with a string.
    oPopBody.innerHTML = "<div  style='position:absolute; top:0; left:0; " +
    "width:240px; height:170px; padding:10px; color:white; font-family:tahoma; " +
     "font-size:13pt;filter:progid:DXImageTransform.Microsoft.Gradient()'> " +
     "<b>This is a popup object</b><hr size='1'>You can continue to type in the " +
     "box while this window is visible. Click outside of the popup object " +
     "boundaries to close it.</div>"

var x = event.offsetX+10;
var y = event.offsetY+10;   oPopup.show(x, y, 240, 170, document.body);
}
function contextMenu()
{
    // The variables "lefter" and "topper" store the X and Y coordinates
    // to use as parameter values for the following show method. In this
    // way, the popup displays near the location the user clicks.
    var lefter = event.offsetX+10;
    var topper = event.offsetY+10;
    oPopup.document.body.innerHTML = oContextHTML.innerHTML;
    oPopup.show(lefter, topper, 200, 65, document.body);
}
function richDialog()
{
    oPopup.document.body.innerHTML = oDialog.innerHTML;
    oPopup.show(100, 50, 400, 300);
}</SCRIPT>
</HEAD>
<BODY ><TEXTAREA onclick="openPopup();" ROWS="6" COLS="30" WRAP STYLE="width:100%" ID="Textarea1" NAME="Textarea1" oncontextmenu="contextMenu(); return false;">
Click in here to open a popup object.</TEXTAREA><h1>Creating Custom Context Menus with the Popup Object</h1>
Right-click anywhere on the document to see a customized popup navigation
menu.
<DIV ID="oContextHTML" STYLE="display:none;">
    <DIV onmouseover="this.style.background='gold';"
         onmouseout="this.style.background='#e4e4e4';"
         STYLE="font-family:verdana; font-size:70%; height:30px; background:#e4e4e4; border:1px solid black; padding:4px; cursor:hand ">
    <SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
    MSDN Web Workshop</SPAN>
    </DIV>
    <DIV onmouseover="this.style.background='gold'"
         onmouseout="this.style.background='#e4e4e4'"
         STYLE="font-family:verdana; font-size:70%; height:30px; background:#e4e4e4; border:1px solid black; padding:4px; cursor:hand; border-top:0px solid black">
    <SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
    Search</SPAN>
    </DIV>
</DIV><hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()"  ID="Button3"> Click Me</button><br>
<BR>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px;  font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1" ID="Button1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc " ID="Button2">Close Message</button>
</DIV> <div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma;  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
</BODY>
</HTML>
你在要特定区域内。加入
oncontextmenu事件就行了。例子：<STYLE>
.skin1 {
VISIBILITY: hidden;
WIDTH: 100px; CURSOR: default;
POSITION: absolute;
TEXT-ALIGN: center ;
BORDER:1px solid;
}
</STYLE>
<SCRIPT language="JavaScript">
<!-- Begin
var menuskin = "skin1"; // skin0, or skin1
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = "hidden";
}
</SCRIPT>
<DIV id=ie5menu>
<a href="http://www.baidu.com">BaiDu</a><br>
<a href="http://www.csdn.net">CSDN</a><br>
</DIV>
<table id="tb">
<tr><td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td></tr>
<tr><td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td></tr>
</table>
<SCRIPT language="JavaScript">
if (document.all && window.print) {
ie5menu.className = menuskin;
//只有在id="tb"内才有自定义鼠标右键.
document.all.tb.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</SCRIPT>

调试易

自定义的右键菜单可否只在特定区域显示？如何实现？

解决方案 »