Javascript 如何将一个可见但位于另一个元素下方的元素作为目标？

我创建了一个主要基于纯HTML和CSS的圆形图形。添加了一点JavaScript和JQuery，用于弯曲文本和以后计划的交互

我的问题是，当我点击右上角的元素时，它被左上角的元素覆盖了。因此，当我通过警报检查单击了哪个元素时，我看到右上角元素的50%区域返回了左上角元素的编号

我如何精确定位我点击的元素？这是我们以后链接到web项目的不同页面所必需的

我创建了一个JSFIDLE来显示问题：

代码如下所示：

$（文档）.ready（函数（）{
函数textRotation（）{
新的圆圈类型（document.getElementById（'demo1'））.radius（185）；
新的圆圈类型（document.getElementById（'demo2'））.radius（185）；
新的圆圈类型（document.getElementById（'demo3'））.radius（185）；
}
textRotation（）；
$（'#demo1'）。children（'div'）。addClass（'pie#segment#path-text#rotation1'）；
$（'#demo3'）。children（'div'）。addClass（'pie#segment#path-text#rotation3'）；
$（'.pie__段'）。在（'click'，function（）上{
var link_target=$（this.data（'href'）；
警报（'KLICK'+链接目标）；
});
})

html{
字体系列：Arial；
字体大小：14px；
}
.馅饼{
边界半径：100%；
高度：计算值（变量（--尺寸，400）*1px）；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
宽度：计算值（变量（--size，400）*1px）；
}
.pie___段{
--a:calc（var（--50以上，0）*-100%）；
--b:calc（（1+var（-50以上，0））*100%）；
--度数：计算（（变量（--偏移，0）/100）*360）；
-webkit剪辑路径：多边形（var（--a）var（--a）、var（--b）var（--a）、var（--b）var（--b）、var（--a）var（--b））；
剪辑路径：多边形（var（--a）var（--a），var（--b）var（--a），var（--b）var（--b），var（--a）var（--b））；
身高：100%；
位置：绝对位置；
-webkit变换：平移（0，-50%）旋转（90度）旋转（计算（var（-degrees）*1deg））；
变换：平移（0，-50%）旋转（90度）旋转（计算（var（-degrees）*1deg））；
-webkit转换来源：50%100%；
变换原点：50%100%；
宽度：100%；
z指数：calc（1+var（--50以上））；
光标：指针；
}
.pie___段：之后，
.pie___段：之前{
背景：var（--bg，#e74c3c）；
内容：''；
身高：100%；
位置：绝对位置；
宽度：100%；
}
.pie___段：之前{
--度数：计算（（变量（--值，45）/100）*360）；
-webkit变换：平移（0,100%）旋转（计算（var（-degrees）*1deg））；
变换：平移（0，100%）旋转（计算（变量（-degrees）*1deg））；
-webkit转换来源：50%0%；
变换原点：50%0%；
}
.pie___段：之后{
不透明度：var（--50以上，0）；
}
.pie_uu段.路径文本{
位置：绝对位置；
左：-82px；
底部：122px；
颜色：#fff；
字号：700；
z指数：2；
宽度：100%；
文本对齐：居中；
}
.pie\uu段.路径文本span div{
高度：2.5em！重要；
}
.pie__段.路径文本span div span:最后一个子项{
颜色：rgba（255，255，255，0.75）；
}
.pie__段.path-text.demo1{
变换：旋转（-90度）；
}
.pie\uuuu段\uuuu路径-文本\uuuu旋转1{
变换：旋转（60度）；
}
.pie__段.path-text.demo2{
变换：旋转（-30度）；
}
.pie___段.path-text.demo3{
变换：旋转（30度）；
}
.pie\uuuu段\uuuu路径-文本\uuuu旋转3{
变换：旋转（-60度）；
}
.饼体{
边界半径：100%；
高度：300px；
宽度：300px；
位置：绝对位置；
顶部：50px；
左：50px；
背景色：#73c6be；
文本对齐：居中；
溢出：隐藏；
}
.饼体p{
线高：260px；
字号：1.75em；
字号：700；
颜色：#0896A5；
}

贝斯皮尔埃因特拉格酒店+
NÄCHSTER EINTRAG+
魏特瑞·恩特拉格+
核辐射

下面是一个如何使用

svg

函数极坐标（centerX、centerY、半径、角度等）{
var angleInRadians=（angleInDegrees-90）*Math.PI/180.0；
返回{
x:centerX+（半径*数学坐标（角半径）），
y：中心y+（半径*数学正弦（角度半径））
};
}
函数描述C（x，y，半径，星形，端角）{
var起点=极笛卡尔坐标（x，y，半径，端角）；
var end=极笛卡尔坐标（x，y，半径，星形）；
var largeArcFlag=endAngle-startAngle startAngle？0:1；//原文如此
变量d=[
“M”，开始.x，开始.y，
“A”，半径，半径，0，大齿轮CFLAG，扫掠标志，结束.x，结束.y
].加入（“”）；
返回d；
}
window.onload=函数（）{
设arc1=document.getElementById（“arc1”）
设arc2=document.getElementById（“arc2”）
设arc3=document.getElementById（“arc3”）
arc1.setAttribute（“d”，descripbearc（200200200100120，0））；
arc2.setAttribute（“d”，descripbearc（200200200100240120））；
arc3.setAttribute（“d”，descripbearc（200200200100360240））；
设text1=document.getElementById（“text1”）
设text2=document.getElementById（“text2”）
设text3=document.getElementById（“text3”）
让textPath1=document.getElementById（“textPath1”）
textPath1.setAttribute（“d”，descripbearc（20020020095120,0））；
让textPath2=document.getElementById（“textPath2”）
textPath2.setAttribute（“d”，descripbearc（20020020095240120））；
让textPath3=document.getElementById（“textPath3”）
textPath3.setAttribute（“d”，descripbearc（20020020095360240））；
[arc1，arc2，arc3，text1，text2，text3].forEach（el=>{
el.addEventListener（“单击”，e=>{
console.log（e.target.getAttribute（“链接”））
})
})
};
*{
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
宽度：100%；
}
身体{
背景色：rgb（36,41,46）；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
svg{
/*外形：2件纯色浅绿色*/
高度：400px；
宽度：400px；
变换：比例（1）；
}
路径
正文{
光标：点