JS 右键创建菜单

来源：互联网发布：python multiply 矩阵编辑：程序博客网时间：2024/05/21 10:26

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>

    this.Show = function(_menu)
    {
        var e = window.event || event;
        if (e.button == 2)
        {
            if (window.document.all)
            {
                this.IContextMenuHander = function(){return false;};
                document.attachEvent("oncontextmenu", this.IContextMenuHander);
            }
            else
            {
                this.IContextMenuHander = document.oncontextmenu;
                document.oncontextmenu = function(){return false;};
            }

window.csMenu$Object = this;
this.IEventHander = function(){window.csMenu$Object.Hide(_menu);};

            if (window.document.all)
                document.attachEvent("onmousedown", this.IEventHander);
            else
                document.addEventListener("mousedown", this.IEventHander, false);

            _menu.style.left = e.clientX;
            _menu.style.top = e.clientY;
            _menu.style.display = "";

            if (this.IFrameHander)
            {
                var _iframe = document.getElementById(this.IFrameHander);
                _iframe.style.left = e.clientX;
                _iframe.style.top = e.clientY;
                _iframe.style.height = _menu.offsetHeight;
                _iframe.style.width = _menu.offsetWidth;
                _iframe.style.display = "";
            }
        }
    };

    this.Hide = function(_menu)
    {
        var e = window.event || event;
        var _element = e.srcElement;
        do
        {
            if (_element == _menu)
            {
                return false;
            }
        }
        while ((_element = _element.offsetParent));

        if (window.document.all)
         document.detachEvent("on"+e.type, this.IEventHander);
        else
         document.removeEventListener(e.type, this.IEventHander, false);

        if (this.IFrameHander)
        {
            var _iframe = document.getElementById(this.IFrameHander);
            _iframe.style.display = "none";
        }

        _menu.style.display = "none";

        if (window.document.all)
         document.detachEvent("oncontextmenu", this.IContextMenuHander);
        else
         document.oncontextmenu = this.IContextMenuHander;
    };

    this.initialize = function(_object, _menu)
    {
        window._csMenu$Object = this;
        var _eventHander = function(){window._csMenu$Object.Show(_menu);};

        _menu.style.position = "absolute";
     _menu.style.display = "none";
     _menu.style.zIndex = "1000000";

        if (window.document.all)
        {
            var _iframe = document.createElement('iframe');
     document.body.insertBefore(_iframe, document.body.firstChild);
            _iframe.id = _menu.id + "_iframe";
            this.IFrameHander = _iframe.id;

            _iframe.style.position = "absolute";
            _iframe.style.display = "none";
            _iframe.style.zIndex = "999999";
            _iframe.style.border = "0px";
            _iframe.style.height = "0px";
            _iframe.style.width = "0px";

            _object.attachEvent("onmouseup", _eventHander);
        }
        else
        {
            _object.addEventListener("mouseup", _eventHander, false);
        }
    };

this.initialize(_object, _menu);
}

</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="Table1" style="width: 1000px; height: 1000px; border: 1px solid black">
        </table>
    </div>
    <div id="Menu1" style="background-color: White; border: 1px solid #cccccc; padding: 10px;">
        <li onclick="alert();">打开</li>
        <li>打印</li>
        <li>回复发件人</li>
        <li>全部回复</li>
        <li>转发</li>
        <li>分配</li>
        <li>垃圾邮件</li>
        <li>删除</li>
        <li>归档此邮件</li>
        <li>分拣此邮件</li>
    </div>
    </form>

</body>
</html>