不要在leaflet中的标记被点击时生成地图点击事件

Question

所以，我有一个leaflet地图...

var map = L.map('map').setView([35.772219, -78.675272], 17);
map.on('click', function(e) {alert('map click!')});

and I add a marker...

var marker = L.circleMarker([35.772219, -78.675272]);
marker.on('click', function(e) {alert('marker click!')});
marker.addTo(map);

如果我点击标记，会触发标记和地图的点击事件，但我只想要标记的点击事件...有没有办法实现这一点？我在文档中找不到相关信息。

- John Chrysostom

Answer 1

L.DomEvent.stopPropagation可以解决这个问题:

阻止事件传播到父元素。在监听器函数中使用：

marker.on('click', function(e) {
    L.DomEvent.stopPropagation(e);
    console.log('marker click!')
});

这是一个演示（一个圆圈取消其事件而另一个没有）

var map = L.map('map').setView([35.772219, -78.675272], 10);
map.on('click', function(e) {console.log('map click!')});


var marker = L.circleMarker([35.772219, -78.68]);
marker.on('click', function(e) {
    L.DomEvent.stopPropagation(e);
     console.log('marker click!')
});
marker.addTo(map);

marker = L.circleMarker([35.772219, -78.63], {fillColor: 'red'});
marker.on('click', function(e) {
     console.log('marker click with map click')
});
marker.addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

<div id="map" style="height: 100px"></div>

- nikoshr

---

好的，这绝对有效。你有没有想过为什么 e.originalEvent.stopPropagation(e); 不起作用？根据文档，e.originalEvent 应该是相关的 DomEvent... - John Chrysostom

可能不是DOM事件传播到地图上，而是由Leaflet管理的事件，这就解释了为什么你必须使用Leaflet工具来取消它。 - nikoshr

有道理！感谢你的帮助！ - John Chrysostom

Answer 2

使用 event.stopPropagation()，以阻止事件冒泡到父级。请参阅 stopPropagation。

document.querySelector('.parent').addEventListener('click', () => {
    console.log('Listening parent');
});

document.querySelector('.child').addEventListener('click', (e) => {
    e.stopPropagation();
    console.log('Listening child');
});

<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

- random

Answer 3

你试过在标记点击的函数中添加e.preventDefault();和e.stopPropagation()吗？像这样：

marker.on('click', function(e) { e.preventDefault(); e.stopPropagation(); alert('marker click!');});

- Palencar

---

需要使用e.originalEvent.stopPropagation();来获取实际的事件而不是Leaflet包装器，但这仍然无效。可能是从地图传播到标记点？ - John Chrysostom

嗯，这很奇怪，使用leaflet时，你的标记应该在地图上方（瓦片）显示，所以标记点击应该是首先触发的事件。你的标记上有一些图片或者自定义样式吗？ - Palencar

尝试使用L.DomEvent.stopPropagation()代替，至少这是他们的文档所说的。 https://leafletjs.com/reference-1.6.0.html#domevent - Palencar