javascript - 无法在可滚动的 div 上使用鼠标滚轮

Question

我有两个 div，一个是另一个的子元素。子 div 是可滚动的并且位于父 div(它是一个 map )上。但是我不能使用鼠标滚轮滚动 div，使用鼠标滚轮可以放大/缩小后面的 map 。当我点击时，我以类似的方式点击下方的 map (子项上的复选框除外)。

家长

<div id="map" class="map" style="position: relative;">

child

<div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;>
  <div>...</div>
  <div>...</div>
</div>

关于如何只在子 div 上使用鼠标滚轮而不影响父 div，有什么想法吗？

我认为这可能与 z-index 相关，因为即使我将 map 的 z-index 设置为 1000，它仍然低于图例。

注意:该 map 是一张 Leaflet map ，以这种方式创建:

var map = L.map('map', {
  center: [45.81, 9.1],
  zoom: 15
}); 

谢谢!

Answer 1

您可以在 div 上禁用点击/滚动传播使用 disableClickPropagation 的元素和 disableScrollPropagation L.DomEvent 的方法.他们将取消事件，因此它不会通过 DOM 冒泡:

L.DomEvent.disableClickPropagation(L.DomUtil.get('legend'));
L.DomEvent.disableScrollPropagation(L.DomUtil.get('legend'));