将点击发送到后台div

Question

我有两个div：一个是包含可点击项的背景，第二个是可滚动的叠加div。我希望能够在不关闭第二个div的滚动功能的情况下单击第一个div中的项目。

这是一个小提琴示例：https : //jsfiddle.net/samlalani/yu832xad/36/

这可能吗？我将不胜感激任何建议，并且不希望使用jQuery（编辑：使用Vanilla JavaScript很好，但是不使用jQuery）。谢谢。

这是HTML：

<div id="wrapper">
  <table>
    <tr><td onclick="alert('1')" class="red">111111</td></tr>
    <tr><td>2</td></tr>
    <tr><td onclick="alert('3')" class="red">333333</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td onclick="alert('6')" class="red">666666</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </table>
  <p>
  The ones, threes and sixes should be clickable, and the magenta div should be scrollable.
  </p>
</div>
<div id="overlay" onclick="overlayClick()">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis tempus est, sit amet faucibus neque congue eu. Aliquam porta enim tortor, condimentum auctor urna vehicula eu. Suspendisse blandit sapien sapien, eu volutpat odio venenatis eleifend. Donec imperdiet maximus posuere. Mauris rutrum venenatis massa et sodales. Nullam convallis sodales tellus. Ut sodales sem nec lacus viverra, nec vehicula enim dictum. Nam sed molestie massa. Vestibulum eget dui felis. Mauris consequat mauris nec nibh aliquam dapibus. Phasellus id laoreet est. Donec sit amet egestas ex, id malesuada dui. Donec imperdiet, sapien ac dignissim dignissim, lectus dolor convallis sapien, vel elementum arcu leo vel diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
</div>

这是CSS：

#wrapper {
  position: absolute;
  left: 10;
  top: 10;
  z-index: 1;
  width: 200px;
  height: 50px;
}
#overlay {
  position: absolute;
  left: 10;
  top: 10;
  z-index: 2;
  opacity: 0.5;
  background-color: magenta;
  width: 200px;
  height: 100px;
  overflow: scroll;
}
.red {
  background-color: red;
  color: yellow;
}

这是JavaScript：

function overlayClick() {
  alert('overlayClick');
}

Answer 1

考虑使用文档的elementsFromPoint属性。（对于 IE/Edge 支持，请使用msElementsFromPoint）。

我刚刚在 JS 中添加了几行，请参阅下面的基本片段：

function overlayClick(e) {
  alert('overlayClick');
  document.elementsFromPoint(e.pageX, e.pageY)
  .find(el => el.classList.contains('red') && el.click())
}

#wrapper {
  position: absolute;
  left: 10;
  top: 10;
  z-index: 1;
  width: 200px;
  height: 50px;
}

#overlay {
  position: absolute;
  left: 10;
  top: 10;
  z-index: 2;
  opacity: 0.5;
  background-color: magenta;
  width: 200px;
  height: 100px;
  overflow: scroll;
}

.red {
  background-color: red;
  color: yellow;
}

<div id="wrapper">
  <table>
    <tr><td onclick="alert('1')" class="red">111111</td></tr>
    <tr><td>2</td></tr>
    <tr><td onclick="alert('3')" class="red">333333</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td onclick="alert('6')" class="red">666666</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </table>
  <p>
  The ones, threes and sixes should be clickable, and the magenta div should be scrollable.
  </p>
</div>
<div id="overlay" onclick="overlayClick(event)">
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis tempus est, sit amet faucibus neque congue eu. Aliquam porta enim tortor, condimentum auctor urna vehicula eu. Suspendisse blandit sapien sapien, eu volutpat odio venenatis eleifend. Donec imperdiet maximus posuere. Mauris rutrum venenatis massa et sodales. Nullam convallis sodales tellus. Ut sodales sem nec lacus viverra, nec vehicula enim dictum. Nam sed molestie massa. Vestibulum eget dui felis. Mauris consequat mauris nec nibh aliquam dapibus. Phasellus id laoreet est. Donec sit amet egestas ex, id malesuada dui. Donec imperdiet, sapien ac dignissim dignissim, lectus dolor convallis sapien, vel elementum arcu leo vel diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
</div>