Question

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

<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定位，但我更喜欢使用bootstrap（用于响应支持）。

无论如何将事件通过引导网格传递给底层元素？

Answer 1

我能够使用＆＃34; pointer-events＆＃34;来解决这个问题。在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/如果有任何问题，请告诉我。

通过Bootstrap Grid传递鼠标事件

1 个答案: