【请教】在框架页中，右击弹出菜单（层）的问题，坐标发生错位！

JS代码，网上找的            if (ie())
            {
                // 找出鼠标在窗口中的位置
                var rightedge=document.body.clientWidth-event.clientX;
                
                var bottomedge=document.body.clientHeight-event.clientY;                menu.style.left=document.body.scrollLeft+event.clientX;                menu.style.top=document.body.scrollTop+event.clientY;                menu.style.visibility="visible";
            }<frameset rows="117,*,25" cols="*" frameborder="NO" border="0" framespacing="0">
    <frame id="Top" src="IndexFrame_Top.aspx" name="TopFrame" scrolling="NO" noresize="true">
    <frameset rows="*" cols="190,*" framespacing="0" frameborder="NO" border="0">
        <frame id="Left" src="<% =GetLeftUrl()%>" name="LeftFrame" scrolling="NO" noresize="true">
        <frame id="Right" src="<% =GetUrl()%>" name="RightFrame">
    </frameset>
    <frame id="Bottom" src="IndexFrame_Bottom.aspx" name="BottomFrame" scrolling="NO" noresize="true">  
</frameset>C#框架页现在有个问题，我框架右边的页面中有个功能，要求点击某图片弹出个菜单，这里我用的层叫menu，这个页面有个滚动条，当我滚动到底下的记录时，弹出的层却在上面。该如何解决，或是有什么别的相关代码，请指教。

解决方案 »

  1.   

    这个问题我也遇到了，是因为框架页本身为一个window对象，而父窗体也是一个window对象同时最层的浏览器窗口也是一个window对象
      

  2.   


    funtion xxx（obj）
    menu.style.left=GetOffsetX(obj)+event.clientX;menu.style.top=GetOffsetY(obj)+event.clientY;
      

  3.   

    GetOffsetY是做什么的，我一运行就提示缺少对象啊。
      

  4.   

    解决了    // 显示菜单
        function showmenu(obj)
        {
            {
                if (ie())
                {
                    var t = obj.offsetTop;
                    var l = obj.offsetLeft;
                    var w = obj.offsetWidth;
                    var h = obj.offsetHeight;                while(obj=obj.offsetParent)
                    {
                        t+=obj.offsetTop;
                        l+=obj.offsetLeft;
                    }                // 找出鼠标在窗口中的位置
                    menu.style.left=l;                menu.style.top=t;                menu.style.visibility="visible";
                }
            }
            return false
        }
    虽然不是很懂一些用法。
      

  5.   

            //这样图片始终处于屏幕中间,也可以调整为你需要的位置
            function sc1()
            {
                document.getElementById("div_onloading").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("div_onloading").offsetWidth)/2)+"px";
                document.getElementById("div_onloading").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("div_onloading").offsetHeight)/2)+"px";
            }
            window.onscroll=sc1;
            window.onresize=sc1;
            window.onload=sc1;
      

  6.   

    才看到你的帖子，带个参数obj实际上就是要相对于你点击的对象定位
      

  7.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>sdf</title>
    <style type="text/css">
    html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;}
      #cmenu{border:1px solid #5EB4D8;background-color:#F6F9FD;padding:2px;}
      ul,li{list-style:none;margin:0px;padding:0px;}
      .item{list-style:none;margin:0px;padding:0px;height:23px;line-height:23px;display:block;padding:0px;padding-left:10px;}
    .itemOver{background-color:#68B5EA;color:#fff;cursor:default;}
    .separator{width:100%;height:1px;line-height:1px;overflow:hidden;font-size:1px;background-color:#5EB4D8;margin:1px 0px 1px 0px;padding:0px;}
      
      .contextDiv{position:absolute;border:1px solid #cccccc;width:150px;height:100px;background-color:#EFECDD;}
    </style><script type="text/javascript">
    <!--
    /**
     * author: yswang
     * version: 1.2
     * date: 2008-08-15
     * mail: [email protected]
     */
     
    // 获取对象
    function $o(id){return document.getElementById(id); }
    // 获取目标元素
    function getElement(evt){ evt = evt ||window.event; return (evt.srcElement || evt.target);}
    // 鼠标X坐标
    function positionX(evt){evt = evt || window.event; return (evt.x || evt.clientX || evt.pageX);}
    // 鼠标Y坐标
    function positionY(evt){evt = evt || window.event; return (evt.y || evt.clientY || evt.pageY);}
    // 清除事件冒泡和传递影响
    function clearEventBubble(evt){
       evt = evt || window.event;
       if(evt.stopPropagation) evt.stopPropagation(); else  evt.cancelBubble = true; 
       if(evt.preventDefault) evt.preventDefault(); else evt.returnValue = false;
    } 
    // 事件绑定
    function addEvent(actionEvents,eventObj){
     eventObj = eventObj || document;
     if(window.attachEvent){
        for(var actionType in actionEvents){
          eventObj.attachEvent("on"+actionType,actionEvents[actionType]); 
        }
      }
       if(window.addEventListener){
         for(var actionType in actionEvents){
           eventObj.addEventListener(actionType,actionEvents[actionType],false);
         }
       }
    }document.oncontextmenu = function(){return false; }// 右键菜单
    function contextMenu(initProps,bindingEvents){
    this._contextMenu = null;                            // 右键菜单体
    this._contextMenuId = initProps["contextMenuId"];    // 待加载右键菜单的对象
    this._targetElement = initProps["targetElement"];    // 右键菜单目标
    this._funcEvents = bindingEvents.bindings;          // 绑定的事件配置信息
    this._menuItems = null;                             // 菜单项
    // 浏览器类型判断
    this._isIE = function(){return navigator.userAgent.toLowerCase().indexOf("msie")!=-1 && document.all};
    }// 初始化右键菜单功能
    contextMenu.prototype.buildContextMenu = function(){

    // 获取菜单对象
    this._contextMenu = $o(this._contextMenuId);
            this._contextMenu.style.top ="-1000px";
            this._contextMenu.style.left="-1000px";
    this._contextMenu.style.display = "none";
            // 阻止菜单的点击事件上传到document.onclick事件上
           this._contextMenu.onclick = function(evt){
                 clearEventBubble(evt);
           } // 初始化样式菜单项
    this._menuItems = this._contextMenu.getElementsByTagName("ul")[0].getElementsByTagName("li");
     for(var i in this._menuItems){
       if(this._menuItems[i].className != "separator"){
        this._menuItems[i].className = "item";
        this._menuItems[i].onmouseover = function(){this.className ="item itemOver";};
        this._menuItems[i].onmouseout = function(){this.className = "item";}
           }
      }
      
    var _self = this;

    addEvent({
    "contextmenu":function(){
     var evt = window.event||arguments[0];
     _self.showContextMenu(evt);
     evt = null;
    },
    "click":function(){
    _self.hideContextMenu();
    }
    },document);}contextMenu.prototype.addFunc = function(funcId,funcEle){
    this._funcEvents[funcId](funcEle);
    }// 显示右键菜单
    contextMenu.prototype.showContextMenu = function(evt){
    try{
      var _cmenuObj = this._contextMenu;
      var _focusEle = getElement(evt);
      var _items = this._menuItems;
      var _self = this;
          if(_focusEle.className == this._targetElement){
           // 绑定菜单项点击事件
        for(var j in _items){
         if(_items[j].id && _items[j].className != "separator"){
          _items[j].onclick = function(){_self.addFunc(this.id,_focusEle); _self.hideContextMenu(); };
           }
        }
          
           _cmenuObj.style.display = "block";
          
           var _px = positionX(evt);
           var _py = positionY(evt);
           var _bodyWidth = parseInt(document.body.offsetWidth ||document.body.clientWidth);
      var _bodyHeight = parseInt(document.body.offsetHeight || document.body.clientHeight);
      var _mWidth = parseInt( _cmenuObj.offsetWidth || _cmenuObj.style.width);
      var _mHeight = parseInt(_cmenuObj.offsetHeight);
      
    _cmenuObj.style.left = ((_px + _mWidth) > _bodyWidth?(_px - _mWidth):_px) +"px";
    _cmenuObj.style.top  = ((_py + _mHeight) > _bodyHeight?(_py - _mHeight):_py) +"px";
          
           // ie 下创建背景遮盖层
           if(this._isIE){
           _self.createIframeBg({
             "left"   : _cmenuObj.style.left,
             "top"    : _cmenuObj.style.top,
             "width"  : _mWidth +"px",
             "height" : _mHeight+"px",
             "z-index": (parseInt(_cmenuObj.style.zIndex)-1)
           });
           }
          
            _px = null,_py = null,_bodyWidth = null,_bodyHeight = null,_mWidth = null,_mHeight = null;
          }else{
           this.hideContextMenu();
          }

    }catch(e){
       }finally{
        _items = null;
        _srcEle = null;
        _cmenuObj = null;
    }

    }// 隐藏右键菜单
    contextMenu.prototype.hideContextMenu = function(){
    // 移除在 ie 下创建 iframe背景层
    if(this._isIE && $o("maskIframe")){
     document.body.removeChild($o("maskIframe"));
    }
    // 隐藏菜单
    if(this._contextMenu && this._contextMenu.style.display != "none"){
      this._contextMenu.style.display = "none";
    }

    }// ie 下为右键菜单添加 iframe背景层，用来遮住 select
    contextMenu.prototype.createIframeBg = function(styleProp){
    var maskStyle = "position:absolute;left:"+styleProp["left"]+";top:"+styleProp["top"]+";width:"+styleProp["width"]+";height:"+styleProp["height"]+";z-index:"+styleProp["z-index"]; if($o("maskIframe")){
    $o("maskIframe").style.cssText = maskStyle;
    }else{
    var _maskIframeBg = document.createElement("<iframe id=\"maskIframe\" src=\"\" frameborder='0' border='0' scrolling=\"no\"></iframe>");
    document.body.appendChild(_maskIframeBg);
        _maskIframeBg.style.cssText = maskStyle;
    _maskIframeBg = null;
      }
      maskStyle = null;
    }
    //-->
    </script></head>
    <body>
    <div id="div1" class="contextDiv" style="left:300px;top:80px;">右键 Div1</div>
    <div id="div2" class="contextDiv" style="left:300px;bottom:0px;">右键 Div2</div>
    <div id="div3" class="contextDiv" style="float:right;right:0px;top:100px;">右键 Div3</div>
    <div id="div4" class="contextDiv" style="float:right;right:0px;bottom:0px;">右键 Div4</div><select style="position:absolute;top:200px;left:300px;">
    <option>1111111111111111111111111111111</option>
    </select> <div id="cmenu" style="position:absolute;display:none;top:0px;left:0px;width:100px;z-index:10000;">
      <ul>
      <li id="open">打开</li>
      <li id="edit">编辑</li>
      <li id="del" class="disabled">删除</li>
      <li class="separator"></li>
                            <li>新建</li>
      <li id="rename">重命名</li>
      <li class="separator"></li>
      <li id="prop">属性</li>
      </ul>
     </div>
    </body>
    <script type="text/javascript">
     var cmenu = new contextMenu(
        {
       contextMenuId : "cmenu",
       targetElement : "contextDiv"
      },
      {
       bindings:{
        'open'  : function(o){alert("打开 "+o.id);},
        'edit'  : function(o){alert("编辑 "+o.id);},
        'del'   : function(o){alert("删除 "+o.id);},
        'rename': function(o){alert("重命名 "+o.id);},
        'prop'  : function(){alert("查看属性");}
        }
       }
      ); cmenu.buildContextMenu();
    </script>
    </html> 这个代码可以尝试用一下。