Javascript:鼠标事件(转贴)

最新推荐文章于 2024-05-15 11:41:51 发布

IamZhuJun

最新推荐文章于 2024-05-15 11:41:51 发布

阅读量1.5k

点赞数

分类专栏：技术文章标签： javascript menu stylesheet class microsoft function

技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp>
<HEAD>
<TITLE>oncontextmenu Event Sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<STYLE>
.menuItem {font-family:sans-serif;font-size:10pt;width:100;padding-left:20;
background-Color:menu;color:black}
.highlightItem {font-family:sans-serif;font-size:10pt;width:100;padding-left:20;
background-Color:highlight;color:white}
.clickableSpan {padding:4;width:500;background-Color:blue;color:white;border:5px gray solid}
</STYLE>

function displayMenu() {
   whichDiv=event.srcElement;
   menu1.style.leftPos+=10;
   menu1.style.posLeft=event.clientX;
   menu1.style.posTop=event.clientY;
   menu1.style.display="";
   menu1.setCapture();
}

function switchMenu() {
   el=event.srcElement;
   if (el.className=="menuItem") {
      el.className="highlightItem";
   } else if (el.className=="highlightItem") {
      el.className="menuItem";
   }
}

function clickMenu() {
   menu1.releaseCapture();
   menu1.style.display="none";　　　　//点击后隐藏菜单
   el=event.srcElement;
   if (el.id=="mnuRed") {
      whichDiv.style.backgroundColor="red";
   } else if (el.id=="mnuGreen") {　　　　　　　　　　
      whichDiv.style.backgroundColor="green";   　　//选择Green时背景变为绿色
   } else if (el.id=="mnuBlue") {
      whichDiv.style.backgroundColor="blue";          //选择blue时背景变为蓝色
   } else if (el.id=="mnuYellow") {
      whichDiv.style.backgroundColor="yellow";       //选择yellow时背景变为黄色

}
}

</SCRIPT>

<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">

<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; }
PRE.clsSyntax { font-size:100%; }
TD DIV.clsBeta { display:none;}
MSHelp/:link {
    color:#0000ff;
    text-decoration:underline;
    cursor:hand;
    hoverColor:#3366ff;
    filterString: ;}
</STYLE>
</HEAD>

<H1>oncontextmenu Event Sample</H1>
<P>This sample shows how to use the <B>oncontextmenu</B> event handler, available in Microsoft® Internet Explorer 5 and later, to display both standard and custom context menus and prevent context menus from displaying. Experiment with each of the following boxes to see how you can apply different methods either to display or to inhibit context menus. Each box provides instructions for you to follow.
</P>

<SPAN class="clickableSpan">
1. The default context menu always displays when you right-click in this box.
<b><br>Code: </b>
//no code necessary
</SPAN><br><br>

<SPAN class="clickableSpan" οncοntextmenu="return event.ctrlKey">
2. The default context menu displays only if you right-click in this box while holding down the Ctrl key. This is useful for developing and debugging purposes.
<b><br>Code: </b>
οncοntextmenu="return event.ctrlKey"
</SPAN><br><br>

<SPAN class="clickableSpan" οncοntextmenu="return false">
3. A context menu never displays when you right-click in this box.
<b><br>Code: </b>
οncοntextmenu="return false"
</SPAN><br><br>

<SPAN class="clickableSpan" οncοntextmenu="displayMenu();return false">
4. A custom context menu displays when you right-click in this box.
<b><br>Code: </b>
οncοntextmenu="showMenu();return false;"
</SPAN><br><br>

<SPAN class="clickableSpan" οncοntextmenu="if (!event.ctrlKey){displayMenu();return false;}">
5. A custom menu displays when you right-click in this box. If you right-click while holding down the Ctrl key, the default context menu displays.
<b><br>Code: </b>
οncοntextmenu="if (!event.ctrlKey){displayMenu();return false;}"
</SPAN><br>

<div id=menu1 οnclick="clickMenu()" οnmοuseοver="switchMenu()" οnmοuseοut="switchMenu()" style="position:absolute;display:none;width:100;background-Color:menu; border: outset 3px gray">
<div class="menuItem" id=mnuRed>Red</div>
<div class="menuItem" id=mnuGreen>Green</div>
<div class="menuItem" id=mnuBlue>Blue</div>
<div class="menuItem" id=mnuYellow>Yellow</div>
</div>

<BR><BR><BR>
<MSHelp:link xmlns:MSHelp="http://msdn.microsoft.com/mshelp" keywords="msdn_copyright" TABINDEX="0">© 2003 Microsoft Corporation. All rights reserved.</MSHelp:link>.

</BLOCKQUOTE>
</BODY>
</HTML>