click event not triggering in leaflet - leaflet

Question

I am using leaflet.js for my application.
The click event is not triggering alongwith the mouseover event.
layer.on({
mouseover: function (e) {
L.popup().setLatLng(e.latlng)
.setContent("Test")
.openOn(map);
},
click: function () {
alert("Click");
map.fire("click", e);
}
});
I am using the custom marker instead of circle marker
option.pointToLayer = function (feature, latlng) {
var marker = L.marker(latlng);
var icon = L.icon({
iconUrl: 'Image/InvestmentIcons/environmentalflow.png',
iconSize: [12, 12], // size of the icon
});
marker.options.icon = icon;
return marker;
}

Answer 1

What happens is that when a user tries to click on your Marker (which would trigger your "click" event listener, i.e. display your alert), they have to move first their mouse over the Marker, which opens a Popup at this position (accordingly with your "mouseover" event listener), so the Popup is now receiving the click, instead of your Marker.
You can see that your "click" listener is still working properly by positioning your mouse cursor just besides the Popup "tip", where it does not cover the Marker icon, but the mouse cursor is still somehow a little bit on the Marker:
To try it live: https://plnkr.co/edit/8Zu0cYeYATp2qY6ltn7N?p=preview
To avoid this UX issue, you could try using a Tooltip instead of a Popup for example. By default it will appear on the side of the coordinates, instead of above it (which makes the Popup cover the Marker).