I have several buttons that select graphics and re-symbolizes the graphics depending on what button the user presses. The way the graphics are selected is by using a mouse-drag on the graphics layer. When pressing on the 1st button, it waits until I press down on the map before it starts the drag. I have another function that listens for a mouse-up to stop the drag. The problem is when I select the other buttons, the drag starts immediately. I need the drag to start when I press down on the map. Is this a normal functionality of the mouse-drag? As a side note, once the mouse-up function activates and I pan around the map, the buttons work as they should (the drag waits for the button click). How can I get the mouse-drag to listen for a mouse-click before immediately firing?
I tried putting a mouse-down before the mouse-drag but the functionality of the map gave me issues. I used stopPropagation() as detailed in over forums.
Using Javascript API 3.23
Solved! Go to Solution.
For anyone wondering, I found another way to stop the mouse-drag initiating before the mouse-click on the map. Add another variable for the mouse down on the graphic and later remove the variable when done by double clicking.
map.on("dbl-click", function(event){
undoPreEvents();
map.setMapCursor("default");
document.getElementById("popup1").style.display = "none";
dojo.stopEvent(event);
event.preventDefault();
event.stopPropagation();
console.log("Mouse Up");
});
function executeSchool1() {
document.getElementById("popup2").style.display = "block";
doPreEvents();
map.setMapCursor("url('images/yellow_crayon.cur'), auto");
executeSchool1EvtMouse = on(blocks, "mouse-down", function() {
document.getElementById("popup1").style.display = "block";
executeSchool1Evt = on(blocks, "mouse-move", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 1;
//gra.setSymbol(sSymbol1);
schoolGL.add(gra);
calculatePopES();
document.getElementById("popup2").style.display = "none";
});
});
}
function executeSchool2(evt) {
document.getElementById("popup2").style.display = "block";
doPreEvents();
map.setMapCursor("url('images/green_crayon.cur'), auto");
executeSchool2EvtMouse = on(blocks, "mouse-down", function() {
document.getElementById("popup1").style.display = "block";
executeSchool2Evt = on(blocks, "mouse-move", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 2;
//gra.setSymbol(sSymbol2);
schoolGL.add(gra);
calculatePopES();
document.getElementById("popup2").style.display = "none";
});
});
}
function clearEvts() {
if (executeSchool1Evt) {
executeSchool1Evt.remove();
executeSchool1EvtMouse.remove();
}
if (executeSchool2Evt) {
executeSchool2Evt.remove();
executeSchool2EvtMouse.remove();
}
}
Sounds like you are not removing existing listeners.
I tried that in several different ways. Below is an excerpt from the file.
map.addLayers([blocks, schoolGL]);
dom.byId("SchoolsButton1").onclick = executeSchool1;
dom.byId("SchoolsButton2").onclick = executeSchool2;
function clearEvts() {
if (executeSchool1Evt) {
executeSchool1Evt.remove();
}
if (executeSchool2Evt) {
executeSchool2Evt.remove();
}
}
function doPreEvents() {
clearEvts();
map.disableClickRecenter();
map.disablePan();
map.disableShiftDoubleClickZoom();
map.disableDoubleClickZoom();
map.disableKeyboardNavigation();
map.disableRubberBandZoom();
}
function undoPreEvents() {
clearEvts();
//map.enableClickRecenter();
map.enablePan();
map.enableShiftDoubleClickZoom();
map.enableKeyboardNavigation();
map.enableRubberBandZoom();
//map.off();
}
function removeHandler() {
dom.byId("SchoolsButton1").removeEventListener("click", executeSchool1Evt);
dom.byId("SchoolsButton2").removeEventListener("click", executeSchool2Evt);
}
map.on("mouse-up", function(){
undoPreEvents();
removeHandler();
console.log("Mouse Up");
});
function executeSchool1() {
doPreEvents();
executeSchool1Evt = on(blocks, "mouse-drag", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 1;
//gra.setSymbol(sSymbol1);
schoolGL.add(gra);
calculatePopES();
e.stopPropagation();
});
//dom.byId("SchoolsButton1").removeEventListener("mouseup", executeSchool1Evt);
}
function executeSchool2() {
doPreEvents();
executeSchool2Evt = on(blocks, "mouse-drag", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 2;
//gra.setSymbol(sSymbol2);
schoolGL.add(gra);
calculatePopES();
e.stopPropagation();
});
}
For anyone wondering, I found another way to stop the mouse-drag initiating before the mouse-click on the map. Add another variable for the mouse down on the graphic and later remove the variable when done by double clicking.
map.on("dbl-click", function(event){
undoPreEvents();
map.setMapCursor("default");
document.getElementById("popup1").style.display = "none";
dojo.stopEvent(event);
event.preventDefault();
event.stopPropagation();
console.log("Mouse Up");
});
function executeSchool1() {
document.getElementById("popup2").style.display = "block";
doPreEvents();
map.setMapCursor("url('images/yellow_crayon.cur'), auto");
executeSchool1EvtMouse = on(blocks, "mouse-down", function() {
document.getElementById("popup1").style.display = "block";
executeSchool1Evt = on(blocks, "mouse-move", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 1;
//gra.setSymbol(sSymbol1);
schoolGL.add(gra);
calculatePopES();
document.getElementById("popup2").style.display = "none";
});
});
}
function executeSchool2(evt) {
document.getElementById("popup2").style.display = "block";
doPreEvents();
map.setMapCursor("url('images/green_crayon.cur'), auto");
executeSchool2EvtMouse = on(blocks, "mouse-down", function() {
document.getElementById("popup1").style.display = "block";
executeSchool2Evt = on(blocks, "mouse-move", function(e) {
gra = e.graphic.clone();
gra.attributes.ES_Num = 2;
//gra.setSymbol(sSymbol2);
schoolGL.add(gra);
calculatePopES();
document.getElementById("popup2").style.display = "none";
});
});
}
function clearEvts() {
if (executeSchool1Evt) {
executeSchool1Evt.remove();
executeSchool1EvtMouse.remove();
}
if (executeSchool2Evt) {
executeSchool2Evt.remove();
executeSchool2EvtMouse.remove();
}
}