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

Question

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

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);

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

Answer 1

L.DomEvent.stopPropagation 应该做的伎俩：

停止给定事件传播到父元素。在侦听器函数中使用：

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

和一个演示（一个圆圈取消其事件，而不是另一个）

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);