Не генерировать события нажатия на карту, когда маркер нажимается в листовке

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

Если я нажимаю на маркер, и маркер, и события щелчка карты запускаются, но я хочу, чтобы событие щелчка было только для маркера ... Есть ли способ выполнить sh это? Кажется, я не могу найти его в документах.

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>

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>

Answer 3

Вы пытались добавить e.preventDefault (); и e.stopPropagation () в функции вашего маркера нажмите? Вот так:

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