Leaflet Draw 防止在活动时单击元素答案

【问题标题】：Leaflet Draw preventing click on elements while is activeLeaflet Draw 防止在活动时单击元素
【发布时间】：2019-05-07 21:14:37
【问题描述】：

我有好几天都没有运气。我正在使用leaflet 1.4.0 和leaflet.draw 1.0.4。我没有使用 L.control.draw UI，而是使用自己的按钮来创建多边形和矩形。它在桌面浏览器上完美运行（当然除了 IE），但在 iPad、Android 平板电脑上失败（我没有在手机上检查过），即使你切换最新的 Chrome 来模拟移动设备（使用'toogle 设备工具栏' 在开发工具上）它失败了。

我创建了这个 jsfiddle 来说明问题：https://jsfiddle.net/fsv8jegd/2/

在关闭“切换设备”的情况下使用 Chrome，点击“开始多边形”按钮。光标变为十字和标签“单击并拖动以绘制矩形”。点击“取消”按钮，光标回到常规箭头。

现在打开 Chrome 开发工具上的“切换设备”，然后选择“响应式”或任何“iPhone”或“iPad”。单击“开始多边形”按钮。光标变为十字。尝试单击“取消”按钮。没发生什么事。它不接收点击事件。取消它的唯一方法实际上是绘制矩形。

有什么想法吗？

谢谢！

html:

<div id="map"> </div>
<button class='buttons' type="button" style="top:0" onclick="startpoly()">START POLY</button>
<button class='buttons' type="button" style="top:20px" onclick="cancelpoly()">CANCEL</button>

css:

#map { height: 200px !important; width: 80%; }
.buttons {position: absolute; left: 0; z-index: 999999}

JS：

polygon_query_options = { shapeOptions: { stroke: true, color: '#6e83f0', weight: 4, opacity: 0.9, fill: true, fillColor: null, fillOpacity: 0.2, clickable: false, dashArray: '10,10' } };

$(document).ready(function() {
  map = L.map('map', { preferCanvas: true, zoomControl: true,  zoom: 10, maxZoom: 20, center: [29.8, -95.5]});

  var drawnItems = new L.FeatureGroup();
  drawnItems.addTo(map);
  drawnItems.bringToFront();

  L.Browser.touch = true;

  var baseMapGroup = new L.featureGroup();

  basemapLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20  });
  basemapLabelLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20  });

  basemapLabelLayer.addTo(map);
  basemapLabelLayer.bringToBack();

  basemapLayer.addTo(map);
  basemapLayer.bringToBack();

  map.on('draw:created', function (e) {
     var layer = e.layer;
     drawnItems.addLayer(layer);
  });
});

function startpoly() {
  polygonDrawer = new L.Draw.Rectangle(map, polygon_query_options);
  polygonDrawer.enable();
};

function cancelpoly() {
  if (polygonDrawer != undefined) { polygonDrawer.disable(); }
};

【问题讨论】：

标签： leaflet leaflet.draw

【解决方案1】：

我发现这是leaflet.draw 库中的一个错误。所以我跟着小道，在leaflet.draw 1.0.4的第1260行，下面的代码导致了这个问题：

document.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

我用这段代码替换了那行：

var tempMap = document.getElementById("map");
tempMap.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

现在基本上不再阻止文档上的 touchstart 事件，而是仅应用于地图对象。

希望这对任何人都有帮助。

【讨论】：