Description
Motivation
Marker has only three events "dragstart", "drag", "dragend". What if you want to get something from marker when it's cliked? You can use addEventListener
on its element from getElement
but the data from DOM Listener doesn't include what Marker object has. e.g. position of Marker, its draggability, etc.
So, it needs more event types including "click", "dblclick", "mouseenter", etc. Then we can get what we want when we need.
Design Alternatives
I'm not so sure about inner-logic how it implements for now. But I can guess, the whatever events are added into map's container.
I tried to use preventDefault
and stopPropagation
but it does not work because it actually does not have a event on it.
- Use case for needs of
prevendDefault
,stopPropagation
thing- There are two markers on map.
- Add event on each marker but second marker should not trigger map's event.
Mock-Up
The look should be like:
marker.on(type, listener, stopPropagation);
stopPropagation
for prevent map's event.
Implementation
Following is the workaround:
// for map
map.on("click", function(e) {
if (e.originalEvent.target !== marker.getElement()) {
// it's map!
}
});
// for marker
map.on("click", function(e) {
if (e.originalEvent.target === marker.getElement()) {
// it's marker!
}
});
It seems good when we have only one marker, but if we have lots of markers, we can not use condition like:
if (e.originalEvent.target !== marker.getElement() &&
e.originalEvent.target !== marker2.getElement() &&
... ) {
Sorry about mixing up with adding click
event and needs of stopPropagation
thing, I think it should be considered when the event things are implemented.
here is fiddle: https://jsfiddle.net/roqh9gjw/4/