在传单 1.0 上单击 GeoJSON 时触发地图答案

【问题标题】：map on click fires when GeoJSON is clicked on leaflet 1.0在传单 1.0 上单击 GeoJSON 时触发地图
【发布时间】：2016-05-29 17:08:37
【问题描述】：

在小册子 1.0 beta2 中，当单击带有单击功能的 GeoJSON 以及定义的地图单击功能时，它们都会触发而不是仅触发一个。在旧版本的传单中不会发生这种情况。有关示例，请参见小提琴。有什么解决方法吗？

传单 7.7 http://jsfiddle.net/tator/5e209s9c/14/

传单 1.0 beta2 http://jsfiddle.net/tator/em9cLfk4/4/

// Create the map
var map = L.map('map').setView([41, -98], 5);

//when map is clicked run identify
map.on('click', identify);

// Identify function
function identify(e) {
    alert('click on the map');
};

//example geojson
var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

//style the polygon with clickedgeojson function
parpoly = L.geoJson(states, {
    style: {
    color: '#ff7800',
    weight: 1.5,
    opacity: 1,
    fillOpacity: 0
   },
   onEachFeature: function(feature, layer) {
    layer.on({
        click: clickedgeojson
     });
    }
});

//clickedgeojson function
function clickedgeojson(e) {
    alert('click on json');
};

// Set up the OSM layer
L.tileLayer(
    'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    {maxZoom: 18}).addTo(map);

//add the geojson to map
parpoly.addTo(map);

【问题讨论】：

标签： leaflet

【解决方案1】：

使用L.DomEvent的stopPropagation方法：

阻止给定事件传播到父元素。

http://leafletjs.com/reference-1.0.0.html#domevent-stoppropagation

//clickedgeojson function
function clickedgeojson(e) {
    L.DomEvent.stopPropagation(e);
    alert('click on json');
};

这是你的 Fiddle 的一个工作分支：http://jsfiddle.net/hakw66nj/

或者您可以将click 事件添加到图层选项对象中的nonBubblingEvents 数组。这目前没有记录，所以我无法链接到任何文档，只链接到 Github 上的提交：

添加 nonBubblingEvents 选项（修复 #3604）

https://github.com/Leaflet/Leaflet/commit/74018f284e8c58d022a9a127406867438aa2a4d0

new L.GeoJSON(collection, {
    nonBubblingEvents: ['click']
})

这是使用此解决方案的 Fiddle 的一个分支：http://jsfiddle.net/hdd8rgkm/

【讨论】：

我明白了。我认为这是传单 1.0 测试版中的一个错误……但是 Ivan Sanchez 告诉我，“层中的事件冒泡到地图上”(github.com/Leaflet/Leaflet/issues/4258)。
是的，我知道 :) CHANGELOG.md 中提到过：“改进的图层 DOM 事件冒泡机制（@yohanboniface）。Leaflet/Leaflet#3307 #3450 #3307”查了一下，我发现我忘记了另一个停止事件冒泡的选项，我会把它添加到我的答案中。

【解决方案2】：

如果您想完全停止传播，iH8 给了您一个很好的答案。但是，如果您仍然希望 map 函数触发，您可以添加变量检查。示例here。

var idGeo = 0;

// Identify function
function identify(e) {
    if(idGeo ==1){
    idGeo = 0;
  }else{
    alert('click on the map');
    idGeo = 0;
  }
};

//clickedgeojson function
function clickedgeojson(e) {
    idGeo = 1;
    alert('click on json');
};

【讨论】：

我知道这很有用。如果您只想在单击 geojson 时执行部分地图单击功能。这是有效的，因为在地图点击之前触发了 geoJSON 点击函数。