嵌套div中onclick事件无法触发的轮盘分段问题求助

我尝试制作可点击的轮盘分段，但onclick事件始终无法触发。将segmentClick()绑定到wheelDiv的onclick可正常触发，推测是嵌套结构问题，尝试将事件移到.hold元素、调整z-index均无效。

初始代码 #

HTML #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body onload="init()">
        <div class="wheelDiv">
            <div id="wheelPiece1" class="hold">
                <div class="wheel" onclick="segmentClick(1)"></div>
            </div>
            <div id="wheelPiece2" class="hold">
                <div class="wheel" onclick="segmentClick(2)"></div>
            </div>
            <div class="innerCircle"></div>
        </div>
    </body>
</html>

CSS #

.wheelDiv {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  position: relative;
  z-index: -1;
}

.wheel {
  transition: all 1s;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 75px, 150px, 0px);
  z-index: 1;
}

.hold {
  border-style: solid;
  border-width: 1px;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 150px, 150px, 75px);
  z-index: -1;
}

.innerCircle{
  width: 10px;
  height: 10px;
  top: 47%;
  left: 47%;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: white;
  border-radius: 100%;
  z-index: 1;
}

#wheelPiece1 .wheel {
  transform: rotate(36deg);
  background-color: lightgrey;
}  
#wheelPiece2 {
  transform: rotate(36deg);
}
#wheelPiece2 .wheel{
  background-color: grey;
  transform: rotate(36deg);
}

JavaScript #

function init(){
    console.log('Called function init().');
}
function segmentClick(segment){
    console.log("You clicked "+segment+".");
}

更新情况 #

移除.hold和wheelDiv的z-index并添加至10个分段后，除2、3、4号分段外其余均可正常触发onclick事件。经排查发现.hold元素因范围过大遮挡了2、3、4号分段（已将其背景设为红色验证），但多次调整.hold类样式仍未解决问题。

更新后的HTML #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body onload="init()">
        <div class="wheelDiv">
            <div id="wheelPiece1" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece1')"></div></div>
            <div id="wheelPiece2" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece2')"></div></div>
            <div id="wheelPiece3" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece3')"></div></div>
            <div id="wheelPiece4" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece4')"></div></div>
            <div id="wheelPiece5" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece5')"></div></div>
            <div id="wheelPiece6" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece6')"></div></div>
            <div id="wheelPiece7" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece7')"></div></div>
            <div id="wheelPiece8" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece8')"></div></div>
            <div id="wheelPiece9" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece9')"></div></div>
            <div id="wheelPiece10" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece10')"></div></div>
            <div class="innerCircle"></div>
          </div>
    </body>
</html>

更新后的CSS #

.wheelDiv {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  position: relative;  
}

.wheel {
  transition: all 1s;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 75px, 150px, 0px);
  background-size: cover;
  z-index: 1;
}

.hold {
  border-style: solid;
  border-width: 1px;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 150px, 150px, 75px);
  background-color: red;
}

.innerCircle{
  width: 10px;
  height: 10px;
  top: 47%;
  left: 47%;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: white;
  border-radius: 100%;
  z-index: 1;
}

#wheelPiece1 .wheel{
  transform: rotate(36deg);
  background-color: lightgrey;
}  
#wheelPiece2 {
  transform: rotate(36deg);
}
#wheelPiece2 .wheel{
  background-color: grey;
  transform: rotate(36deg);
}
#wheelPiece3 {
  transform: rotate(72deg);
}
#wheelPiece3 .wheel{
  background-color: darkgrey;
  transform: rotate(36deg);
}
#wheelPiece4 {
  transform: rotate(108deg);
}
#wheelPiece4 .wheel{
  background-color: black;
  transform: rotate(36deg);
}
#wheelPiece5{
  transform: rotate(144deg);
}
#wheelPiece5 .wheel {
  background-color: lightblue;
  transform:rotate(36deg);
}  
#wheelPiece6{
  transform:rotate(180deg);
}
#wheelPiece6 .wheel {
  background-color: darkcyan;
  transform:rotate(36deg);
}  
#wheelPiece7{
  transform:rotate(216deg);
}
#wheelPiece7 .wheel {
  background-color: lightcoral;
  transform:rotate(36deg);
}  
#wheelPiece8{
  transform:rotate(252deg);
}
#wheelPiece8 .wheel {
  background-color: coral;
  transform:rotate(36deg);
}  
#wheelPiece9{
  transform:rotate(288deg);
}
#wheelPiece9 .wheel {
  background-color: burlywood;
  transform:rotate(36deg);
}  
#wheelPiece10{
  transform:rotate(324deg);
}
#wheelPiece10 .wheel {
  background-color: brown;
  transform:rotate(36deg);
}  

更新后的JavaScript #

function init(){
    console.log('Called function init().');
}

function segmentClick(segment){
    console.log("You clicked "+segment+".");
}

内容的提问来源于stack exchange，提问作者griff-223