Skip to main content
 首页 » 编程设计

javascript之我如何定位一个可见但位于另一个元素下方的元素

2026年07月28日10bluestorm

我创建了一个主要基于纯HTML和CSS的圆形图形。添加了一些 JavaScript 和 JQuery 用于 flex 文本和稍后计划的交互。

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

我如何精确定位我点击的元素？这是稍后链接到我们网络元素的不同页面所必需的。

我创建了一个 JSFiddle 来显示问题:https://jsfiddle.net/niklasbuschner/gj67md4u/4/

代码如下所示:

$(document).ready(function() { 
  function textRotation() { 
    new CircleType(document.getElementById('demo1')).radius(185); 
    new CircleType(document.getElementById('demo2')).radius(185); 
    new CircleType(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__segment').on('click', function() { 
    var link_target = $(this).data('href'); 
    alert('KLICK' + link_target); 
  }); 
})
html { 
  font-family: Arial; 
  font-size: 14px; 
} 
 
.pie { 
  border-radius: 100%; 
  height: calc(var(--size, 400) * 1px); 
  overflow: hidden; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: calc(var(--size, 400) * 1px); 
} 
 
.pie__segment { 
  --a: calc(var(--over50, 0) * -100%); 
  --b: calc((1 + var(--over50, 0)) * 100%); 
  --degrees: calc((var(--offset, 0) / 100) * 360); 
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)); 
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)); 
  height: 100%; 
  position: absolute; 
  -webkit-transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg)); 
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg)); 
  -webkit-transform-origin: 50% 100%; 
  transform-origin: 50% 100%; 
  width: 100%; 
  z-index: calc(1 + var(--over50)); 
  cursor: pointer; 
} 
 
.pie__segment:after, 
.pie__segment:before { 
  background: var(--bg, #e74c3c); 
  content: ''; 
  height: 100%; 
  position: absolute; 
  width: 100%; 
} 
 
.pie__segment:before { 
  --degrees: calc((var(--value, 45) / 100) * 360); 
  -webkit-transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg)); 
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg)); 
  -webkit-transform-origin: 50% 0%; 
  transform-origin: 50% 0%; 
} 
 
.pie__segment:after { 
  opacity: var(--over50, 0); 
} 
 
.pie__segment .path-text { 
  position: absolute; 
  left: -82px; 
  bottom: 122px; 
  color: #fff; 
  font-weight: 700; 
  z-index: 2; 
  width: 100%; 
  text-align: center; 
} 
 
.pie__segment .path-text span div { 
  height: 2.5em !important; 
} 
 
.pie__segment .path-text span div span:last-child { 
  color: rgba(255, 255, 255, 0.75); 
} 
 
.pie__segment .path-text.demo1 { 
  transform: rotate(-90deg); 
} 
 
.pie__segment__path-text__rotation1 { 
  transform: rotate(60deg); 
} 
 
.pie__segment .path-text.demo2 { 
  transform: rotate(-30deg); 
} 
 
.pie__segment .path-text.demo3 { 
  transform: rotate(30deg); 
} 
 
.pie__segment__path-text__rotation3 { 
  transform: rotate(-60deg); 
} 
 
.pie-body { 
  border-radius: 100%; 
  height: 300px; 
  width: 300px; 
  position: absolute; 
  top: 50px; 
  left: 50px; 
  background-color: #73c6be; 
  text-align: center; 
  overflow: hidden; 
} 
 
.pie-body p { 
  line-height: 260px; 
  font-size: 1.75em; 
  font-weight: 700; 
  color: #0896A5; 
}
<div class="pie-container" style="position: relative; top: 100px; left: 100px;"> 
  <div class="pie"> 
    <div class="pie__segment" data-href="1" style="--offset: 0; --value: 33.33333; --bg: #089baa"> 
      <div class="path-text demo1"> 
        <span id="demo1">BEISPIEL EINTRAG +</span> 
      </div> 
    </div> 
    <div class="pie__segment" data-href="2" style="--offset: 33.33333; --value: 33.33333; --bg: #066f7a;"> 
      <div class="path-text demo2"> 
        <span id="demo2">NÄCHSTER EINTRAG +</span> 
      </div> 
    </div> 
    <div class="pie__segment" data-href="3" style="--offset: 66.66666; --value: 33.33333; --bg: #044249;"> 
      <div class="path-text demo3"> 
        <span id="demo3">WEITERER EINTRAG +</span> 
      </div> 
    </div> 
  </div> 
  <div class="pie-body"> 
    <p>Kernaussage</p> 
  </div> 
</div>

请您参考如下方法:

以下是如何使用 svg 的示例

function polarToCartesian(centerX, centerY, radius, angleInDegrees) { 
  var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; 
 
  return { 
    x: centerX + (radius * Math.cos(angleInRadians)), 
    y: centerY + (radius * Math.sin(angleInRadians)) 
  }; 
} 
 
function describeArc(x, y, radius, startAngle, endAngle) { 
 
  var start = polarToCartesian(x, y, radius, endAngle); 
  var end = polarToCartesian(x, y, radius, startAngle); 
 
  var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"; 
  var sweepFlag = endAngle > startAngle ? 0 : 1; //sic 
 
  var d = [ 
    "M", start.x, start.y, 
    "A", radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y 
  ].join(" "); 
 
  return d; 
} 
 
window.onload = function() { 
  let arc1 = document.getElementById("arc1") 
  let arc2 = document.getElementById("arc2") 
  let arc3 = document.getElementById("arc3") 
 
  arc1.setAttribute("d", describeArc(200, 200, 100, 120, 0)); 
  arc2.setAttribute("d", describeArc(200, 200, 100, 240, 120)); 
  arc3.setAttribute("d", describeArc(200, 200, 100, 360, 240)); 
 
  let text1 = document.getElementById("text1") 
  let text2 = document.getElementById("text2") 
  let text3 = document.getElementById("text3") 
 
  let textPath1 = document.getElementById("textPath1") 
  textPath1.setAttribute("d", describeArc(200, 200, 95, 120, 0)); 
 
  let textPath2 = document.getElementById("textPath2") 
  textPath2.setAttribute("d", describeArc(200, 200, 95, 240, 120)); 
 
  let textPath3 = document.getElementById("textPath3") 
  textPath3.setAttribute("d", describeArc(200, 200, 95, 360, 240)); 
 
 
  [arc1, arc2, arc3, text1, text2, text3].forEach(el => { 
    el.addEventListener("click", e => { 
      console.log(e.target.getAttribute("link")) 
    }) 
  }) 
};
* { 
  margin: 0; 
  padding: 0; 
} 
 
html, 
body { 
  height: 100%; 
  width: 100%; 
} 
 
body { 
  background-color: rgb(36, 41, 46); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 
 
svg { 
  /*outline: 2px solid lightgreen;*/ 
  height: 400px; 
  width: 400px; 
  transform: scale(1); 
} 
 
path, 
text { 
  cursor: pointer; 
} 
 
text { 
  font-family: arial; 
  font-size: 14px; 
  fill: #fff; 
}
<svg viewBox="0 0 400 400"> 
  	<circle shape-rendering="geometricPrecision" cx="200" cy="200" r="100" fill="#73c6be" stroke="none" /> 
		<path shape-rendering="geometricPrecision" id="arc1" fill="none" stroke="#089baa" stroke-width="30" link="Link1.html" /> 
		<path shape-rendering="geometricPrecision" id="arc2" fill="none" stroke="#066f7a" stroke-width="30" link="Link2.html" /> 
		<path shape-rendering="geometricPrecision" id="arc3" fill="none" stroke="#044249" stroke-width="30" link="Link3.html" /> 
 
		<path id="textPath1" fill="none" stroke="none" /> 
		<path id="textPath2" fill="none" stroke="none" /> 
		<path id="textPath3" fill="none" stroke="none" /> 
 
	 	<text id="text1"> 
	    <textPath  
	    	href="#textPath1" 
    	 	link="Link1.html" 	    	 
	    	startOffset="15%" 
	    	>BEISPIEL EINTRAG+</textPath> 
  	</text> 
    <text id="text2"> 
	    <textPath  
	    	href="#textPath2"   	 
	     	link="Link2.html" 
	    	startOffset="10%" 
	    	>NACHSTER EINTRAG+</textPath> 
		</text> 
    <text id="text3"> 
	    <textPath  
	    	href="#textPath3" 
	    	link="Link3.html" 
	    	startOffset="10%" 
	    	>WEITERER EINTRAG+</textPath> 
		</text> 
  </svg>


  文章来源：
  https://blog.windname.com/post/aejeic2b1.html
阅读延展