Question

在传单1.0 beta2中，当点击GeoJSON并指定了点击功能以及定义的地图点击功能时，它们都会触发，而不是只触发一个。传单的旧版本中不会发生这种情况。请参阅小提琴示例。有没有解决方法呢？

宣传单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

使用stopPropagation＆＃39; //clickedgeojson function function clickedgeojson(e) { L.DomEvent.stopPropagation(e); alert('click on json'); };方法：

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

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

click

这是你小提琴的工作分岔：http://jsfiddle.net/hakw66nj/

或者您可以将nonBubblingEvents事件添加到图层选项对象中的new L.GeoJSON(collection, { nonBubblingEvents: ['click'] })数组中。这目前没有记录，因此我无法链接到Github上的提交任何文档：

添加nonBubblingEvents选项（修复＃3604）

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

template <typename Iterator>
bool parser(Iterator& first, Iterator const& last)
{
    using namespace x3;

    x3::rule<class quote,std::string> const quote = "quote";
        auto quote_def = '"' >> *(char_-'"') >> '"';

//   x3::rule<class header,std::vector<std::string>> const header = "header";
//  auto header_def = quote % ',';

    BOOST_SPIRIT_DEFINE(quote);

    return true;
}

int main(int argc, char** argv)
{
    std::string test = "\"abc\",\"def\"";

    auto it=std::begin(test);
    parser( it, std::end(test));

    return 0;
}

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

Answer 2

如果你想完全停止传播，iH8会给你一个很好的答案。但是，如果您仍希望触发地图功能，则可以添加变量检查。示例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');
};

在单张1.0

2 个答案: