javascript - HTML Canvas Overlay不会禁用以下内容

我想将由红色边框定义的画布放在当前位于其下方的div（黑色边框）上。它的大小应与div相同。我还希望能够单击按钮并选择画布下方的文本。
我已经尝试这样做了两天了，无法解决...

<canvas id="canvas">

</canvas>
<div class="jumbotron">
    <div class="container-fluid" id="canvas-container">
    </div>
</div>

当前的CSS（我知道这是一团糟，但是我一直在尝试很多事情）

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  margin-top: 50px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

body > .container {
  padding: 60px 15px 0;
}
.container .text-muted {
  margin: 20px 0;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

code {
  font-size: 80%;
}

.jumbotron
{
  text-align: center;
}
#canvas-container
{
  padding: 0;
  //position: absolute;
  border: 1px solid black;
}
.jumbotron
{
    padding: 0;
    #position: absolute;
}

canvas {
  border: 1px solid red;
}

最佳答案

您需要指定：

canvas {
  pointer-events:none;
}

这是一个js小提琴，您可以在其中测试单击黑框在红框下方的区域：

https://jsfiddle.net/1n1bp7m9/1/

关于javascript - HTML Canvas Overlay不会禁用以下内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39279560/