Develop Reference

jQuery mouseup() issue

I'm sure this is something simple that I am missing but I'm at a loss.
I have this block of jQuery:
jQuery("span.frm_inline_total").digits();
jQuery(".frm_input_group").on("blur", "input", function () {
jQuery("span.frm_inline_total").digits();
});
jQuery(".frm_range_container input").mouseup(function () {
jQuery("span.frm_inline_total").digits();
console.log("mouse up");
});
jQuery(".frm_range_container input").mousedown(function () {
jQuery("span.frm_inline_total").digits();
console.log("mouse down");
});
That calls a function to place commas in some field numbers. I don't think it's relevant, but here is the function:
jQuery.fn.digits = function () {
return this.each(function () {
jQuery(this).text($(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
})
}
My issue is this. Everything works except when I try to call digits() using mouseup(). It logs the mouseup() event with 'console.log', and the mousedown() event correctly works, but no mouseup(). ...alert("mouse up") works, just not 'digits'.
For what it's worth, I'm placing this event on a built-in slider in a drag-and-drop website I am editing. My "development" is limited to client side code. There is already an event on it to retrieve the new values that I thought might be interfering, but then I don't understand why it would fire logs or alerts.

Assuming your HTML structure is something like this:
<div class="frm_range_container">
<div class="frm_input_group">
<span class="frm_inline_total">Value to replace</span>
<input value="Click me"></input>
</div>
</div>
and the rest of your code works, changing the code like below should produce desired output.
// added logs to check in console, digits function is the same
$.fn.digits = function () {
console.log('digits'); // test to see if reaches digits() function
return this.each(function () {
// this should be the correct element.
$(this).text(
$(this).text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
);
})
}
$(".frm_range_container input").on('mouseup mousedown', function (e) {
console.log(e.type);
$("span.frm_inline_total").digits();
});
If you want to only target span.frm_inline_total contained in each frm_range_container, you can use $("span.frm_inline_total", this).digits(); for that

Custom events binding in jquery function on not working

I just came to know about the jQuery .on() method and decided to use it as it was much cleaner than using multiple binds. It is working as long as I am using pre-defined events but when I am trying to add custom events it is not working.
I have this auxiliary function
var EV_ENTER_KEY = "enterKey";
function bind_events(cur_obj, e) {
if (e.keyCode == 13) {
$(cur_obj).trigger(EV_ENTER_KEY);
}
}
which I am using in the following code
CATEGORY_INPUT.on({
keyup: function (e) {
bind_events(this, e);
}
});
//Action for Category Search box Enter press
CATEGORY_INPUT.bind(EV_ENTER_KEY, function () {
alert("Aseem");
});
I am changing it to the following
CATEGORY_INPUT.on({
keyup: function (e) {
bind_events(this, e);
},
EV_ENTER_KEY: function () {
alert("Aseem");
}
});
But it is not working. No errors are being logged in console either for this. I looked and found this and I think I am using it correctly. The API reference did not have any examples of binding multiple events. Can someone tell whether I missed something in the API? If not what is the problem here?

It seems you have to give the custom event as string directly instead of storing it in a js variable and then using it.
If you change EV_ENTER_KEY to "enterKey" in your multiple event binding then it will work.
$(".myInput").on({
keyup: function (e) {
bind_events(this, e);
},
"enterKey": function () {
alert("Enter key pressed");
}
});
JS fiddle demo : http://jsfiddle.net/9ur4c/

It can be made to work like this. This is according to this answer
var EV_ENTER = "enter"
categoryInputEvents = {}
categoryInputEvents[EV_ENTER] = function(e) {
alert("Enter Event");
}
CATEGORY_INPUT.on(categoryInputEvents)
Although this still does not explain the thing reported by #Sanjeev but it is better to have alternatives.

Make an OverlayView clickable in Google Maps V3

I'm trying to add a mouseover event listener to a Google Maps overlay view. I've been following this question, but can't get the listener to work. This is my code:
InfoWindow.prototype = new google.maps.OverlayView;
InfoWindow.prototype.onAdd = function() {
this.getPanes().overlayMouseTarget.appendChild(this.$content.get(0));
this.getPanes().overlayMouseTarget.parentNode.style.zIndex = 100000;
google.maps.event.addListener(this, 'mouseover', function() {
console.log('MOUSEOVER');
});
};
This doesn't give any errors, but also doesn't do anything on mouseover. I've also tried using this.listeners:
this.listeners = [
google.maps.event.addDomListener(this, "mouseover", function (e) {
console.log('MOUSEOVER');
})
];
but it doesn't help either. What am I doing wrong?

For the domListener to work, you need to attach it to a dom node:
google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) {
console.log('MOUSEOVER');
});

Disable map zoom on CircleMarker double click in leaflet

I'm trying to disable the zoom on the map when I click in a CircleMarker object, but until now, no success.
This is my code:
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle.on("click", function () {
//my click stuff
});
myCircle.on("dblclick", function () {
//my dblclick stuff
});
Everytime the dblclick event is fired, the map is zoomed, how to disable it?

try
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
map.doubleClickZoom.disable();
refer this document

All answers here are after the Leaflet map object has been initialized.
I'd like to give my take by stating that you can also disable doubleClickZoom during map object initialization.
Note: This will disable doubleClickZoom to the whole map and not just circleMarkers.
map = L.map('map', {
center: [39.8282, -98.5795],
zoom: 5,
doubleClickZoom: false
});
P.S. I'm running leaflet version 1.7.1

Following solution seems to work for me:
myCircle.ondblclick = function (event) {
event.stopPropagation();
return false;
};
I have also tried another one, which also works quite well in practice, but I find it a bit hacky:
myCircle.on("click", function () {
map.doubleClickZoom.disable();
setTimeout(function(){map.doubleClickZoom.enable();}, 1000);
});

None of the answers above worked for me:
calling native ev.originalEvent.preventDefault() did nothing
returning false neither
I don't like the doubleClickZoomworkaround that much (although… it works!)
Using Leaflet DomEvent did the job for me:
import { DomEvent } from 'leaflet';
myFeature.on("dblclick", function (ev) {
DomEvent.stopPropagation(ev)
});

If anyone is here looking for a solution to the use case "I want to zoom in on the map on double-click but not if the double-click happens on an entity", this is how I solved it:
const circle = new L.circlemarker(...).addTo(map);
circle.on("dblclick", () => {
map.doubleClickZoom.disable();
doSomething();
setTimeout(() => {
map.doubleClickZoom.enable();
}, 1); // Without the timeout the map will still zoom in on entity double-click
});
FYI event.preventDefault(); event.stopPropagation(); and return false; inside the "dblclick" handler did not work for me.

You can return false from your dblclick handler which will stop the event from propagating e.g.
myCircle.on("dblclick", function () {
//my dblclick stuff
return false;
});
Now other elements (such as the map) won't handle that event

Try this... Disable map.doubleClickZoom when you mouse over the circle and enable when you leave
var myCircle = new L.CircleMarker(new L.LatLng(50.924480, 10.758276), 10).addTo(map);
myCircle
.on("click", function () {
//my click stuff
})
.on("dblclick", function () {
//my dblclick stuff
})
.on('mouseover', function () {
map.doubleClickZoom.disable();
})
.on('mouseout', function () {
map.doubleClickZoom.enable();
});

First you need to disable the map double click zoom and then enable it again on the map click event. So when you double click the map after double clicking on the marker it zoom again ;) I tried it and it works for me perfectly! Enjoy!
map.doubleClickZoom.disable();
map.on('click', function (e) {
map.doubleClickZoom.enable();
});

Google Map event bounds_changed triggered multiple times when dragging

I have a google map with markers. I want my markers to be refreshed when the map is moved/zoomed...
Google recommend to use the event bounds_changed for that, but when I move the map, the event is triggered for each pixel that I move the map. I want the map to be refreshed only when the user stopped moving the map, i.e. when he released the mouse button after dragging.
How can I do that ?

It turns out it was a reported bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.
The Google team recommend to use the event "idle". For example :
google.maps.event.addListener(map, 'idle', function() {
});

While the selected answer is best for most circumstances. If you want to control the delay yourself, you can simply use something like;
var mapupdater;
{....}
google.maps.event.addListener(map, "bounds_changed", mapSettleTime);
function mapSettleTime() {
clearTimeout(mapupdater);
mapupdater=setTimeout(getMapMarkers,500);
}

Add a timeout, that runs your code 500ms after the event fires, each time the event fires clear the timeout and create a new one.
google.maps.event.addListener(map, 'bounds_changed', (function () {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
// here goes an ajax call
}, 500);
}
}()));

You should check how a debounce function works. A nice article by Taylor Case define it as follows:
This function is built in order to limit the amount of times a
function is called — scroll events, mousemove events, and keypress
events are all great examples of events that we might want to capture,
but can be quite taxing if we capture them every single time they
fire.
So you define the function somewhere in your code:
function debounce(fn, time) {
let timeout;
return function() {
const args = arguments;
const functionCall = () => fn.apply(this, args);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
}
}
Then you just use that function when adding your listener:
google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));
It seems that 250 ms is a good frequency to use here.

try using both zoom_changed and dragend

Here is a little snippet that will remove all redundant 'bound_changed' call's:
var timeout;
google.maps.event.addListener(map, 'bounds_changed', function () {
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
//do stuff on event
}, 500);
}); //time in ms, that will reset if next 'bounds_changed' call is send, otherwise code will be executed after that time is up