今天才知道clientTop那些是相对于父坐标的定位的

我仅了解到clientTop位置相对于父坐标。如果动态位置很多，则需要递归获得相对于html的距离。 。 。

我偶然发现了此方法getBoundingClientRect

getBoundingClientRect用于获取元素相对于窗口的位置的集合。集合中有顶部，右侧，底部

left和其他属性。

然后发现该事件实际上具有x和y的直接坐标。 。

发生x，y事件的位置的x和y坐标，相对于使用CSS动态定位的最里面的包含元素。

仰望天空，因此坐标直接出现，解决方案是通过从事件中减去pos来解决的。 。 。

以下是示例，菜单是右键单击菜单，而绘图是元素。您所要做的就是在元素中找到菜单。解决滚动和多重定位问题

rightClick(column, event){
            let menu = this.$refs.menu;
            let drawing = this.$refs[this.name + -div];
            //先可见，不然可见宽高为0
            this.menuVisible = true;
            //获取表格元素相对于视窗的位置集合
            let pos = drawing.getBoundingClientRect();  
            //获取可用空间
            let rightedge = pos.right - event.x;
            let bottomedge = pos.bottom - event.y;
            
            if(rightedge < menu.offsetWidth){
                /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左差额的距离*/
                menu.style.left = event.x - pos.x  - (menu.offsetWidth - rightedge) + "px";
            }else{
                /*否则，就定位菜单的左坐标为当前鼠标位置*/
                menu.style.left = event.x - pos.x + "px";
            }
            
            if(bottomedge < menu.offsetHeight){
                /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上差额高度*/
                menu.style.left = event.x - pos.x  - (menu.offsetHeight - bottomedge) + "px";
            }else{
                /*否则，就定位菜单的上坐标为当前鼠标位置*/
                menu.style.top = event.y - pos.y + "px";
            }
            
            document.addEventListener(click, this.hidePanel, false)
            //console.log(event);
            //console.log(pos);
            if(event.stopPropagation){
                event.stopPropagation()
            }else{
                event.cancelBubble = true
            }
            //如果提供了事件对象，则这是一个非IE浏览器
            if (event && event.preventDefault) {
                //阻止默认浏览器动作(W3C) 
                event.preventDefault();
            }
            else {
                //IE中阻止函数器默认动作的方式 
                window.event.returnValue = false;
                return false;
            }
        },

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-351641-1.html