右鍵菜單實現javascript

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<body bgcolor="#eeeeee">
<br /><br /><br /><br /><br /><span style='font-size:40px;'>點擊右鍵試試吧</span>
<script language="javascript">
function AttachEvent(obj, PjBnqAI_l96, CFl97, AjdjOLf_98)
{
if(obj["addEventListener"])
{
var qiVTmdtA99 = (typeof(AjdjOLf_98) != "undefined" && AjdjOLf_98) ? true : false;
obj["addEventListener"](PjBnqAI_l96, CFl97, qiVTmdtA99);
}
else
{
obj["attachEvent"]("on"+ PjBnqAI_l96, CFl97);
}
}

/*
功能：菜單類
作者：梨花街網站__巍巍乎
目期：2007.1.15
版本：1.0
修改：無
僅支援ie，不相容firefox，有興趣的朋友可以自己改，大至思路在這裡
*/
function ContentClass()
{
var _oDiv = null;
var _oTable = null;
var nSelected = -1;
var _fnArray = new Array(30);
var _oRows = null;
var _nCurrent = 0;
var oClick = null;
var oKeyDown = null;

this.fnSelectedRows = function(nIndex)
{
if(nIndex >= 0 && nIndex <= (_oTable.rows.length-1))
{
if(nSelected != nIndex)
{
if(nSelected > -1)
{
if(_oTable.rows.length > nSelected)
{
_oTable.rows[nSelected].style.backgroundColor = "";
}
}
}
_oTable.rows[nIndex].style.backgroundColor = "#E8EEF7";
nSelected = nIndex;
}
}

oKeyDown = this.fnSelectedRows;

this.__OnKeyDown = function(e)
{
if(_oDiv.style.display == "")
{
var keyNum = 0;
if(window.event)
{
keyNum = e.keyCode;
}
else
{
keyNum = e.which;
}
var nIndex = -1;
switch(keyNum)
{
case 37:
case 38:
nIndex = nSelected - 1;
if(nSelected == 0)
{
nIndex = _oTable.rows.length - 1;
}
oKeyDown(nIndex);
break;
case 39:
case 40:
nIndex = nSelected + 1;
if(nSelected == _oTable.rows.length - 1)
{
nIndex = 0;
}
oKeyDown(nIndex);
break;
case 13:
if(nSelected > -1 && nSelected <= (_oTable.rows.length - 1))
{
oClick(e);
}
break;
default:
return false;
}
}
}

this.ClickRows = function(e)
{
_oRows = null;
oGetRows(e.srcElement);
if(_oRows != null)
{
for(var i=0; i<_nCurrent; i++)
{
if(_oRows == _fnArray[i][0])
{
_fnArray[i][1]();
_oDiv.style.display = "none";
break;
}
}
}
}
oClick = this.ClickRows;

this._onMouseOver = function(e)
{
_oRows = null;
oGetRows(e.srcElement);
if(_oRows != null)
{
oKeyDown(_oRows.rowIndex);
}
}
this._onContextMenu = function(e)
{
if(_oDiv.style.display != "")
{
_oDiv.style.display = "";
}
var tempx;
var tempy;
if(e.pageX)
{
tempx = e.pageX;
tempy = e.pageY;
}
else
{
tempx = e.clientX;
tempy = e.clientY;
}
if((tempy + _oDiv.clientHeight + 4) > document.body.clientHeight)
{
tempy = tempy - _oDiv.clientHeight - 4;
if((tempy + _oDiv.clientHeight + 4) > document.body.clientHeight)
{
tempy = document.body.clientHeight - _oDiv.clientHeight - 4;
}
}
else
{
tempy -= 2;
}

if((tempx + _oDiv.clientWidth + 4) > document.body.clientWidth)
{
tempx = tempx - _oDiv.clientWidth - 4;
if((tempx + _oDiv.clientWidth + 4) > document.body.clientWidth)
{
tempx = document.body.clientWidth - _oDiv.clientWidth - 4;
}
}
else
{
tempx -= 2;
}
_oDiv.style.top = (document.body.scrollTop + tempy).toString() + "px";
_oDiv.style.left = (document.body.scrollLeft + tempx).toString() + "px";
return false;
}
var __onContextMenu = this._onContextMenu;
this._onClick = function(e)
{
if(_oDiv.style.display == "")
{
_oDiv.style.display = "none";
}
}
_oDiv = document.createElement("<div style='display:none;top:0px;left:0px;position:absolute;width:150px;overflow:auto;background-color:#FFFFFF; border-width:1px; border-style:solid; border-bottom-color: #676767; border-right-color:#676767; border-left-color:#CCCCCC; border-top-color:#CCCCCC;'></div>")
document.body.appendChild(_oDiv);
_oTable = document.createElement("<table width='100%' border='0' cellpadding='3' cellspacing='0'></table>")
_oTable.appendChild(document.createElement("tbody"));
_oTable.style.cursor = "pointer";
_oDiv.appendChild(_oTable);
AttachEvent(_oTable, "click", this.ClickRows);
AttachEvent(_oTable, "mouseover", this._onMouseOver);
AttachEvent(document.body, "contextmenu", __onContextMenu);
AttachEvent(document.body, "click", this._onClick);
AttachEvent(document.body, "keydown", this.__OnKeyDown);

var oGetRows = null;

this.GetRows = function(obj)
{
if(typeof(obj.tagName) != "undefined" && obj.tagName.toLowerCase() == "tr")
{
_oRows = obj;
return;
}
if(obj != null && obj.parentNode != null)
{
oGetRows(obj.parentNode);
}
else
{
_oRows = null;;
}
}
oGetRows = this.GetRows;

this.AppendMenu = function(strMenuText, strImage, fnClickFunction)
{
if(_oTable != null)
{
if(_nCurrent < 30)
{
var root = _oTable.tBodies[0];
var oTr = document.createElement("tr");
var oTd = document.createElement("td");
oTd.style.width = "20px";
if(typeof(strImage) == "string")
{
oTd.innerHTML = "<img src='"+ strImage +"' width='16' height='16' />"
}
else
{
oTd.innerHTML = "·";
}
oTr.appendChild(oTd);
oTd = document.createElement("td")
oTd.innerHTML = strMenuText;
oTr.appendChild(oTd);
root.appendChild(oTr);
_fnArray[_nCurrent] = new Array(2);
_fnArray[_nCurrent][0] = oTr;
_fnArray[_nCurrent][1] = fnClickFunction;
_nCurrent++;
}
else
{
//菜單超過最大限度
}
}
}

this.RemoveMenu = function(nIndex)
{

}
}
</script>
<script language="javascript">
var pageClass = new ContentClass();
pageClass.AppendMenu("關於本軟體", "images/Folder.bmp", fnTest0);
pageClass.AppendMenu("設定許可權",   "images/Folder.bmp", fnTest1);
pageClass.AppendMenu("刪除圖片",   "images/Folder.bmp", fnTest2);
pageClass.AppendMenu("你在啊",     "images/Folder.bmp", fnTest3);
function fnTest0()
{
alert(0);
}
function fnTest1()
{
alert(1);
}
function fnTest2()
{
alert(2);
}
function fnTest3()
{
alert(3);
}
</script>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More