传单点击事件无法仅收听地图图层答案

【问题标题】：Leaflet click event unable to listen to only the map layer传单点击事件无法仅收听地图图层
【发布时间】：2019-07-12 11:13:10
【问题描述】：

我的传单项目上有一些用户绘制的形状。单击形状时，另一个元素（例如侧边栏）将打印出统计信息。如果我单击地图图层，则该元素应该重置。

我尝试使用 map.on('click') 事件，但它会监听所有用户绘制的图层以及地图图层。我只想让事件监听地图层。


map.on('click', onBackgroundClick);

function onBackgroundClick(e)
{
    let type = e.layerType;

    if (type !== 'polygon' && type !== 'polyline' && type !== 'marker' && type != 'rectangle')
    {
          //reset sidebar state
    }
}

我对事件进行了哪些更改以使其仅侦听地图图层。有没有更好的方法来解决这个问题？

【问题讨论】：

标签： javascript leaflet leaflet-draw

【解决方案1】：

或者您可以在子组件中调用stopPropagation，这样子组件上的点击事件不会通过 DOM 树传播，而只会在地图上传播。

【讨论】：

【解决方案2】：

添加点击创建图层：

L.featureGroup(arr).on('click', function(){/* Your Code*/ });

您可以随时使用on 方法添加事件监听器。

【讨论】：

【解决方案3】：

您尝试中的问题与您的other question 有类似的根本原因，即event.layerType 仅由 Leaflet.draw 插件设置，仅当用户创建了新功能时。

这里的解决方案可能包括测试单击的图层是否不是您的功能的一部分，如果后者都是图层组的一部分，如果您使用 Leaflet.draw 可能就是这种情况：

const clickedLayer = e.target;
if (!myLayerGroup.hasLayer(clickedLayer))

另一种可能的解决方案可能是测试点击的图层是否是瓷砖图层：

const clickedLayer = e.target;
if (clickedLayer === myTileLayer)

// or
if (clickedLayer instanceof L.TileLayer)

【讨论】：