代码之家 › 专栏 › 技术社区 › four-eyes

将div覆盖在传单上并阻止鼠标动作传播

leaflet javascript

four-eyes · 技术社区 · 6 年前

如何阻止在div上单击和滚动、覆盖传单地图的传播?这看起来很棘手。。。像这样的

customPreventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}

document.getElementById('no-scrolling-clicking').onmousewheel =
    function (e) {
        document.getElementById('prevent-scrolling').scrollTop -= e.wheelDeltaY;
        customPreventDefault(e);
    }
}

什么都不做。它也需要在IE中工作。。。

http://jsfiddle.net/LnzN2/4888/

3 回复 | 直到 6 年前

Worm 6 年前

移动你的 parent-div 外面的 map 部门。

将HTML更改为:

<div 
  id="map">

</div>
<div 
  id='parent-div'
  class='some-div'>
   I am the parent! Like the leaflet map, I don't want the mouse events clicking/scrolling bubbling onto me neither.
    <div 
      class='some-div'
      id='no-scrolling-clicking'>
      Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me! Stop Scrolling and clicking Event in me!
    </div>
  </div>

ghybs 6 年前

L.DomEvent.disableScrollPropagation(element)

var el = document.getElementById('no-scrolling-clicking');
L.DomEvent.disableScrollPropagation(el);

更新的JSFiddle: http://jsfiddle.net/LnzN2/4929/

虽然本手册中未提及此功能 docs for Leaflet 0.7.x ,它已经可用。

它为您处理浏览器变体。

1.3.4 ).

four-eyes 6 年前

leaflet 为此提供了一个功能。

  var div = L.DomUtil.get('no-scrolling-clicking');
  L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
  L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前