Javascript 在具有Z索引的子分层div上触发Onclick，指针事件不'；行不通_Javascript_Css

Javascript 在具有Z索引的子分层div上触发Onclick，指针事件不'；行不通

javascript css

Javascript 在具有Z索引的子分层div上触发Onclick，指针事件不'；行不通,javascript,css,Javascript,Css,我希望能够单击并更改背景（div）的颜色，使用剪切方式png <body> <div style="border: 1px solid red; width: 650px; height: 500px; margin: 0px auto; pointer-events: none; ;"> <div class="frame" style="background-color: blue; -webkit-mask-image: url('./asse

我希望能够单击并更改背景（div）的颜色，使用剪切方式

png

<body>
  <div style="border: 1px solid red;  width: 650px; height: 500px; margin: 0px auto;  pointer-events: none; ;">
    <div class="frame" style="background-color: blue; -webkit-mask-image: url('./assets/Layer1.png'); z-index: 0"></div>
    <div class="frame" style="background-color: red; -webkit-mask-image: url('./assets/Layer2.png'); z-index: 1"></div>
    <div class="frame" style="background-color: grey; -webkit-mask-image: url('./assets/Layer3.png'); z-index: 2"></div>
    <div class="frame" style="background-color: yellow; -webkit-mask-image: url('./assets/Layer4.png'); z-index: 3"></div>
  </div>

  <style>
    .frame {
      position: absolute;
      pointer-events: auto;
      width: 640px;
      height: 490px;
      padding: 1px;
      margin: 0px auto;
      box-sizing: border-box;
    }
  </style>
</body>


.框架{
位置：绝对位置；
指针事件：自动；
宽度：640px；
高度：490px；
填充：1px；
保证金：0px自动；
框大小：边框框；
}

向父div添加一个ID，并在其上添加一个click处理程序

let parent = document.getElementById('parent')
    parent.addEventListener('click', function() {
     parent.style.backgroundColor = event.target.style.backgroundColor;
    })

谢谢你。。但是我想要的是能够点击儿童div来改变颜色，也就是点击div1来改变颜色，或者点击div2来改变颜色……就像一本配色书，我没有选择使用任何人的SVGany帮助。这已经过去一年了，仍然没有解决方案。请参考图片。有什么建议吗？