javascript - 在mapbox gl js中的图层上注册点击事件时如何操作事件冒泡

Question

如何停止层点击事件的事件传播？

mapBox.on('click', layerId, function (e) {
    console.log(e);
    // e.stopPropagation(); which is not working 
    // e.originalEvent.stopPropagation(); which is not working 
    var popupHtml = getPopupHtmlWrapper(e.features[0]);
    new mapboxgl.Popup({closeButton:false})
        .setLngLat(e.lngLat)
        .setHTML(popupHtml)
        .addTo(mapBox);
});

Answer 1

Mapbox 提供对原始事件的访问。这意味着每当我们想要限制 click只点击最顶层，我们需要做的就是调用e.originalEvent.preventDefault()在第一层并检查 e.originalEvent.defaultPrevented在下面的层中:

this.map
  .on('click', 'layer_1', function(e) { // topmost layer
    e.originalEvent.preventDefault();
    // layer_1 functionality
  })
  .on('click', 'layer_2', function(e) { // second topmost layer
    if(!e.originalEvent.defaultPrevented) {
      // click was performed outside of layer_1
      e.originalEvent.preventDefault();
      // layer_2 exclusive functionality
    }
  })
  .on('click', 'layer_3', function(e) {
    if(!e.originalEvent.defaultPrevented) {
      // click was performed outside of layer_1 and layer_2
      e.originalEvent.preventDefault();
      // layer_3 exclusive functionality here...
    }
...
  })