Question

请参阅：http://gisdev.clemson.edu/fireflies/

右上角是jquery ui Tab组件。如您所见，单击选项卡组件内部可使背景图滚动。我尝试过这样的事情：opacity:1并尝试了这段代码：

      $( "#tabs" ).click(function() {
        return false;
      });

但没有任何效果。任何的想法？谢谢！

Answer 1

我通过制作自定义组件来修复此问题，如下所示：

https://github.com/ngageoint/geoq/blob/develop/geoq/core/static/core/js/leafletcontrols/leaflet.simple_button.js

用过：

https://github.com/ngageoint/geoq/blob/develop/geoq/core/static/core/js/aoi_feature_edit.js#L320-L329

这有几行可以捕获控件上的事件并阻止它们传播到它下面的地图：

onAdd: function (map) {
  this._map = map;
  var container = L.DomUtil.create('div', 'leaflet-control-button');

  L.DomEvent.on(container, 'mousedown', L.DomEvent.stopPropagation)
    .on(container, 'doubleclick', L.DomEvent.stopPropagation)
    .on(container, 'click', L.DomEvent.stopPropagation);

Answer 2

宣传单L.DomEvent有disableClickPropagation方法：

将stopPropagation添加到元素＆＃39;点击＆＃39;，＆＃39; doubleclick＆＃39;，＆＃39;鼠标按下＆＃39;和＆＃39; touchstart＆＃39;事件

除了disableClickPropagation之外，您还需要为wheel事件添加一个侦听器以停止传播。

var customControl = L.Control.extend({
    onAdd: function (map) {
      var div = L.DomUtil.create('div','custom-control');
      L.DomEvent.disableClickPropagation(div);
      L.DomEvent.addListener(l, 'wheel', L.DomEvent.stopPropagation);
      return div;
    }
});

http://leafletjs.com/reference.html#domevent

Answer 3

Per JayCrossler的评论，我有这个代码（主要）处理这个问题。谢谢Jay！

  $( "#tabs" ).click(function() {
      var container = this; // this = 'tabs' div
      L.DomEvent.on(container, 'mousedown', L.DomEvent.stopPropagation).on(container, 'doubleclick', L.DomEvent.stopPropagation).on(container, 'click', L.DomEvent.stopPropagation);
  });

leaflet.js jquery UI选项卡：防止背景地图滚动

3 个答案: