在传单中单击标记时不生成地图单击事件答案

【问题标题】：Don't generate map click events when marker clicked in leaflet在传单中单击标记时不生成地图单击事件
【发布时间】：2020-01-29 15:50:17
【问题描述】：

所以，我有一张传单地图……

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

然后我添加了一个标记...

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

如果我点击标记，标记和地图点击事件都会触发，但我只想要标记的点击事件......有没有办法做到这一点？我似乎在文档中找不到。

【问题讨论】：

标签： javascript leaflet

【解决方案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>

【讨论】：

好的，这绝对有效。知道为什么e.originalEvent.stopPropagation(e); 不起作用吗？根据文档，e.originalEvent 应该是有问题的DomEvent...
传播到地图的可能不是 DOM 事件，而是由 Leaflet 管理的事件，这可以解释为什么您必须使用 Leaflet 实用程序来取消它。
有道理！感谢您的帮助！

【解决方案2】：

你有没有尝试添加一个 e.preventDefault();和 e.stopPropagation() 在您的标记点击功能中？像这样：

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

【讨论】：

需要使用e.originalEvent.stopPropagation(); 来获取实际事件而不是传单包装器，但这仍然不起作用。可以从地图传播到标记吗？
嗯，这很奇怪，使用传单，您的标记应该在地图上方（说瓷砖），所以标记点击是第一个触发的事件。你的标记上有一些 img 或自定义样式吗？
尝试使用 L.DomEvent.stopPropagation() 代替，至少这就是他们的文档说的原因。 leafletjs.com/reference-1.6.0.html#domevent

【解决方案3】：

使用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>

【讨论】：