当在 leaflet 1.0 上单击 GeoJSON 时，点击地图会触发

Question

在 leaflet 1.0 beta2 中，当点击 GeoJSON 并分配了点击功能以及定义了地图点击功能时，它们都会触发，而不是只触发一个。这不会发生在旧版本的传单中。有关示例，请参见 fiddle。有什么解决方法吗？

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

Leaflet 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);

Answer 1

使用L.DomEvent的stopPropagation方法：

Stop the given event from propagation to parent elements.

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 数组。这目前没有记录，所以我不能 link 任何文档只是提交 Github:

Add nonBubblingEvents option (fix #3604)

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

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

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

Answer 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');
};

当在 leaflet 1.0 上单击 GeoJSON 时，点击地图会触发

map on click fires when GeoJSON is clicked on leaflet 1.0

leaflet