通过 Bootstrap Grid 传递鼠标事件答案

【问题标题】：Pass mouse events through Bootstrap Grid通过 Bootstrap Grid 传递鼠标事件
【发布时间】：2014-11-20 22:36:51
【问题描述】：

我正在尝试在整页谷歌地图控件上添加一个引导容器，但是我无法通过容器将鼠标事件传递到下面的地图。我的设置看起来像这样。

<body onload="initialize()">
  <div id="map-canvas"></div>       

  <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    ***content in here***
  </div> 

  <div class="container">
    <div class="row">
      <div class="col-md-5 col-sm-6 col-xs-12">
          ***content in here***
      </div> <!--column 1 -->

      <div class="col-md-5  col-sm-6 col-xs-12 pull-right">
          ***content in here***
      </div> <!--column 2-->
    </div> <!--row 1-->

    <div class="row">
      <div class="col-md-5 col-sm-6 col-xs-12">
        ***content in here***
      </div>
    </div> <!--row 2-->
    </div>
</body>

我希望我可以将内容放置在地图控件上，同时仍然允许下方的画布接收网格中不存在任何内容的鼠标事件，例如，在中等显示的情况下，第 2 行第 6 到第 12 列.

作为测试，我尝试使用“pointer-events:none;”在容器上，但事件仍然没有通过。我的后备方案是简单地使用 css 定位，但我更喜欢使用引导程序（用于响应式支持）。

有没有办法通过引导网格将事件传递给底层元素？

【问题讨论】：

能否在 jsfiddle.net 或 jsbin.com 或 bootply.com 中展示带有 CSS/Js 的演示？

标签： google-maps dom twitter-bootstrap-3 mouseevent

【解决方案1】：

我能够使用“指针事件”解决这个问题。在 Mac（Safari、Chrome 和 Firefox）上检查。

所有的魔法都在这里：

.overmap {
  position: absolute;
  top: 100px;
  left: 50px;
  pointer-events: none;
}

.container .full {
  background-color: #ffffff;
  pointer-events: fill;
}

请查看演示（中心栏正在将事件传递给地图）：http://jsfiddle.net/giftedev/qu2Lduwp/，如果有任何问题，请告诉我。

【讨论】：

谢谢，效果很好。我错过的部分魔力是绝对位置设置的必要性，但我仍然不清楚为什么需要它。洞察力？