使两个重叠的div都可点击？

html5 • • 问答

是否可以制作两个重叠的 div，都可以点击？

我已将 div 添加到两个容器中，#container并且#container2. 他们的风格完全相同，只是一个是flex-direction: column;和一个是flex-direction: column;。无论position:absolute用#container2在上面。我使每个附加的孩子都可以点击以填充其背景颜色。到目前为止，只有顶部的 div 是可点击的，有没有办法让两者都可点击？还是有另一种方法让底部 div 对我的点击做出反应？

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>
  <div></div>
  <div></div>
</div>

回答

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

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>
  <div></div>
  <div></div>
</div>

以上是使两个重叠的div都可点击？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容