Question

我有一张传单地图，地图上有一个事件（点击）和一个附加到圆圈标记的事件（点击）。现在我想改变圆圈标记的颜色，但问题是地图的事件也会激发，这会干扰圆圈标记点击的逻辑。

如何在点击圈标记时阻止地图事件触发？

var circleMarker = L.circleMarker([point.lat, point.lng], {
  radius: 8,
  fillColor: "#ff0097",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8
}).addTo(drawmap);

circleMarker.on("click", function(e) {
  e.originalEvent.preventDefault(); //This does not work
  circleMarker.setStyle({ fillColor: '#1b1b1b' });
});


drawmap.on('click', function(e) {
//something unrelated
}

Answer 1

没有看到在Leaflet的事件对象内部处理这个问题的方法。也许你可以用外部标志跟踪：

var isCircleEvent = false;
circleMarker.on("click", function (e) {
    circleMarker.setStyle({ fillColor: '#1b1b1b' });
    isCircleEvent = true;
});


drawmap.on('click', function (e) {
    if (isCircleEvent) {
        //reset the flag and return;
        isCircleEvent = false;
        return;
    }
    //something unrelated
});

Answer 2

最新条目：

在Leaflet docs中，创建标记bubblingMouseEvents时有一个选项可以防止事件传播。在创建circleMarker时也可以使用。

所以在您的情况下：

var circleMarker = L.circleMarker([point.lat, point.lng], {
  radius: 8,
  fillColor: "#ff0097",
  color: "#000",
  weight: 1,
  opacity: 1,
  fillOpacity: 0.8,
  bubblingMouseEvents: false
}).addTo(drawmap);

LeafletJS：点击圈标记时阻止点击地图

2 个答案: