js获取当前触发元素的位置（绕过a标签）

需求的由来是这样的：我需要做一个点击的动画效果，涉及到获取当前元素的位置，但是下一层的a标签会干扰到实际的获取情况，所以我需要绕过下面的标签，只获取触发器，下面是图

js原生的  getBoundingClientRect()  方法，可以获取到当前元素的相对浏览器位置

逻辑是获取到元素之后检查这个标签是否为a标签，是则寻找他的父元素（触发器），再用找到的父元素使用get....Rect()方法，下面是代码

 

HTML

<div @click="type_select($event)">
    <a>预定</a>
</div>

<!-- 外层的div是触发器 -->

JS

type_select(e){ 
                
    if(e.target.tagName === "A"){
        console.log(e.path[1].getBoundingClientRect())
    } else {
        console.log(e.target.getBoundingClientRect())
    }
                
}

// tagName是当前标签的大写，localName是小写（例：DIV 和 div ）
// path是当前元素分支的dom树，一直到根结点，都可以访问到

结果：无论我点击的是a标签还是外层div都可以获取到外层div的参数