Develop Reference

Leaflet on mouseout event not firing when changing iconUrl

I am experiencing an issue with leaflet and it's mouseout event.
In the code below, sometimes (particulary if you move the mouse fast), the mouseout event is not triggered. The Mouse out ! doesn't appear in the console.
I found out that this behaviour is related to the icon replacement. A simple layer.setStyle works every time. (Here I use the leaflet-gpx plugin but it works the same way as leaflet's IconUrl or shadowUrl)
// This works every time
gpxPath.on('mouseover', function (e) {
var layer = e.target;
layer.options.marker_options.startIconUrl = 'myHoverIconStartUrl';
layer.options.marker_options.endIconUrl = 'myHoverIconEndUrl';
layer.reload();
});
gpxPath.on('mouseout', function (e) {
console.log('Mouse out !')
var layer = e.target;
/* those two lines below cause the issue */
layer.options.marker_options.startIconUrl = '';
layer.options.marker_options.endIconUrl = '';
layer.reload();
});
I know that the mouseout event sometimes causes issues like this one, but in this particular case I am forced to use the leaflet events and I am a little bit out of ideas.

Are you trying to make markers display a different icon on hover?
It's hard to tell without an example, but what I think is happening is:
Your mouseoutevent isn't getting triggered reliably because the mouseover event is ran continuously, as long as your mouse is positioned on it, every time the icons rebuild.
You may notice this if you add a console.log in that function as well. You can happen to move off while it is rebuilding, so you don't trigger the mouseout event reliably.
If so, try something like:
line.once('mouseover', function () {
//switch to icons
});
line.on('mouseout', function () {
//clear icons
//Prevent mouseover event from firing continuously if/when the icon changes
line.once('mouseover', function () {
//switch to icons
});
});

Google Maps event listener does not get removed

I'm having trouble understanding why the setgeometry event inside my mouseup event keeps firing after rightlick event... even though I do remove the setgeometry event listener.
drawLayer.addListener('mouseup', function() {
changedGeom = drawLayer.addListener('setgeometry', function(e) {
console.log('got new geometry');
google.maps.event.removeListener(changedGeom);
});
});
drawLayer.addListener('rightclick', function(e) {
console.log('deleted polygon');
google.maps.event.removeListener(changedGeom);
});
The reason why I have setgeometry inside mouseup is because I only want the last position of the polygon. Otherwise it will record every move.
Maybe I'm over complicating this, but here's what to do to reproduce the problem:
Open the console and drag the polygon on the Google Map. You should see got new geometry message once.
Now rightclick on your mouse and you should see the message delete polygon.
Now move the polygon again. You will see that the setgeometry event keeps firing, resulting in plenty of got new geometry messages.
I'm unsure why this is happening. Can someone explain?
Demo: http://jsfiddle.net/8ueq6spu

I have figured out why this is happening to you.
I removed your rightclick listener to see that an event was still being triggered on a right click action, then I realised it is because both left click and right click result in a mouseup event.
So in your current implementation the listener is being removed on the rightclick press/event, but a new instance is created as soon as the button is released due to the mouseup event.
To fix this behaviour you could opt for a standard click instead of mouseup, however, I also noted that this event does not fire when you drag the boundary nodes (which is probably why you used mouseup in the first place).
A quick fix would be to still use the mouseup event, but detect which type of click the event originated from e.g.
drawLayer.addListener('mouseup', function(e) {
if (e.which === 1) {
console.log("Left click");
} else if (e.which === 2) {
console.log("Middle click");
} else if (e.which === 3) {
console.log("Right click");
}
});
Adapted this solution from : How to distinguish between left and right mouse click on mousedown
event in Google Map API v3

createjs prevent hyperlink interaction

In my simple application canvas wrapped by hyperlink. Some objects, which are placed on canvas stage have special mouse interaction on click event. Is there any possible solutions to prevent hyperlink jumping by clicking on objects with my mouse click event listeners?

Normally you can just call preventDefault on the generated mouse event, and it will stop the link event from firing.
element.addEventListener("click", function(e) {
e.preventDefault();
}, false);
This is not possible using EaselJS because although you can access the nativeEvent on any EaselJS mouse event, EaselJS doesn't use the "click" event at all (and instead uses a combination of "mousedown" and "mouseup"). So preventing default on a click event will do nothing.
Doesn't work
// You would expect this to work.
myShape.on("click", function(e) {
e.nativeEvent.preventDefault(); // Nothing. This cancels a "mouseup" instead.
});
Workaround
However, you can work around this pretty easily. Set a flag on the clicked item (or wherever you would set it in your application) any time it is clicked.
myShape.addEventListener("click", function(event) {
myShape.clicked = true;
}, false);
Then, listen for the canvas click event yourself, check and check the flag. Make sure to reset it after. This is possible because "click" is always fired after "mouseup"
stage.canvas.addEventListener("click", function(event) {
if (myShape.clicked) { event.preventDefault(); }
myShape.clicked = false;
}, false);
Here is a quick fiddle showing it working. http://jsfiddle.net/buqkvb1u/
We are looking to see if this makes sense to handle in EaselJS. Thanks for your report!

HTMLDivBalloon - Google Earth API Question

I have a problem using balloons in google earth.
I have some markers on the map, upon clicking on a marker, a balloon popup is shown containing some data, now when I click on the close button of that balloon, the click event of the map is also triggered which is really annoying as I have a handler attached with the map click event.
I tried everything including using event.stopPropagation() in the 'beforeclose' event of the htmlDivBalloon but still nothing works.
Anyone has an idea about that ?
Best Regards
John Tadros

The chances are you are not handling the default event or you are not screening which objects the event acts in the handler "attached with the map click event". You haven't shown any code, so it is hard to say exactly how to fix it - but a generic way to handle this is as follows.
// listen for mousedown on the window
google.earth.addEventListener(ge.getWindow(), 'mousedown', function(e) {
var type = e.getTarget().getType();
if (type == 'KmlPlacemark') {
// prevent the default event for placemarks, stop Propagation
e.preventDefault();
e.stopPropagation();
} else if(type == 'GEGlobe') {
// do something with the globe...
}
// etc...
});

Javascript event handling for Google Maps

I am using google maps + javascript + php in my application.
I want to know two things:
In google maps,
does moveend event ALWAYS gets fired
AFTER zoomend/dragend (whichever of
two) event occurs.
When I click zoom icon on google map
or scroll the mouse wheel to zoom,
the zoomend event gets fired more
than once. If I zoom in one step
using + icon on map, the zoomend
event gets fired twice or sometimes
more. any possible loophole.
And so want to know how to stop further event propogation in javascript. (remember I need not use clearListeners as it will forever ignore event handler which is undesirable).
Thank you.

I set up listeners for 'moveend', 'zoomend', and 'dragend' to try it out.
GEvent.addListener(map, "moveend", function() { console.log('moveend'); });
GEvent.addListener(map, "zoomend", function() { console.log('zoomend'); });
GEvent.addListener(map, "dragend", function() { console.log('dragend'); });
It appears that 'moveend' always fires after 'zoomend' or 'dragend'.
However, no events ever fired more than once at a time. Maybe you accidentally set up two simultaneous listeners. You shouldn't need to use stopPropagation or cancelBubble.

you could try just reuturning false or null from the event.
If that doesn't work trying using "event.cancelBubble = true" or "event.stopPropagation"