获取鼠标点击位置在某个元素中的位置

今天才知道clientTop那些是相对于父坐标的定位，如果有很多个动态定位的，就要需要递归去获取相对于html的距离。。。。
偶然发现getBoundingClientRect这个方法

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom,
left等属性。

然后又发现event里面实际上是有x,y的直接坐标的。。。

x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

望天，所以坐标直接就出来了，直接拿event的减去pos的就解决了。。。。
下面是示例，menu 是右键菜单，drawing 是某个元素，要做的就是把菜单定位到元素中，要解决滚动和多重定位问题

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;
            }
        },