时间戳

首页 > 解决方案 > 在具有 Z 索引的子分层 div 上触发 Onclick，指针事件不起作用

javascript - 在具有 Z 索引的子分层 div 上触发 Onclick，指针事件不起作用

问题描述

我希望能够单击并使用 cut out by 更改背景（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>

图片

标签： javascriptcss

解决方案

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

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

推荐阅读