javascript - 让两个重叠的 div 都可点击？

Question

是否可以制作两个重叠的 div，都可以点击？
我已将 div 附加到两个容器 #container和 #container2 .它们的样式完全相同，只是其中一个是 flex-direction: column;一个是 flex-direction: column; .两个position:absolute与 #container2在上面。我使每个附加的 child 都可以点击以填充其背景颜色。到目前为止，只有顶部的 div 是可点击的，有没有办法让两者都可点击？还是有其他方法可以让底部 div 对我的点击使用react？

window.addEventListener('load', init);

function init() {
  calculateGrid();

  //calculate grid
  function calculateGrid() {

    var w = window.innerWidth;
    var h = window.innerHeight;

    var totalNum = Math.trunc(w / 25) * Math.trunc(h / 25);

    function randomInRange(from, to) {
      let x = Math.random() * (to - from);
      return x + from;
    };

    for (var i = 0; i < totalNum; i++) {
      var div = document.createElement('div');
      div.setAttribute('class', 'grid');
      div.style.width = randomInRange(3, 10) + 'vw';
      div.style.height = randomInRange(5, 10) + 'vh';
      document.getElementById('container').appendChild(div);
      document.getElementById('container2').appendChild(div.cloneNode(true));
    }
  };

  $(".grid").click(function() {
    $(this).toggleClass('selected');
  });

};

#container {
  width: 100vw;
  height: 95vh;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-direction: column;
  overflow: hidden;
}

#container .grid {
  border: 1px solid blue;
}

#container2 {
  width: 100vw;
  height: 95vh;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-direction: row;
  overflow: hidden;
}

#container2 .grid {
  border: 1px solid red;
}

.grid {
  font-size: 10px;
  color: white;
}

#container .selected {
  background-color: blue;
}

#container2 .selected {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="wrapper">
  <div id="container"></div>
  <div id="container2"></div>
</div>

View on CodePen

Answer 1

一种方法是使用 Document.elementsFromPoint()返回“指定坐标处所有元素的数组”。遍历该数组，将“选定”类添加到“网格”元素。

window.addEventListener('load', init);

function init() {

  // build grid
  function calculateGrid() {

    var w = window.innerWidth;
    var h = window.innerHeight;

    var totalNum = Math.trunc(w / 25) * Math.trunc(h / 25);

    function randomInRange(from, to) {
      let x = Math.random() * (to - from);
      return x + from;
    };

    for (var i = 0; i < totalNum; i++) {
      var div = document.createElement('div');
      div.setAttribute('class', 'grid');
      div.style.width = randomInRange(3, 10) + 'vw';
      div.style.height = randomInRange(5, 10) + 'vh';
      document.getElementById('container1').appendChild(div);
      document.getElementById('container2').appendChild(div.cloneNode(true));
    }

  };

  // handle grid clicks
  function handleGridClick(e) {
    let elms = document.elementsFromPoint(e.clientX, e.clientY);
    Array.from(elms).forEach(elm => {
      if (elm.classList.contains('grid'))
        elm.classList.add('selected');
    });
  }

  // initialize grid and click handler
  calculateGrid();
  document.addEventListener('click', handleGridClick);

};

.container {
  width: 100vw;
  height: 95vh;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
}

#container1 {
  flex-direction: column;
}
#container1 .grid {
  border: 1px solid blue;
}
#container1 .grid.selected {
  background-color: blue;
}

#container2 .grid {
  border: 1px solid red;
}
#container2 .grid.selected {
  background-color: red;
}

<div id="wrapper">
  <div id="container1" class="container"></div>
  <div id="container2" class="container"></div>
</div>