Google Maps API事件侦听器优先级

Question

I have a map which has a google.maps.event.addListener set on the map object for click events to place a marker on the map. Now I want to add a context menu to the markers, so am creating a custom overlay in the floatPane . Again google.maps.event.addListener is used to add a rightclick event to each marker to position and display the menu.

Once the menu is displayed I want it to be cleared by either a menu item being selected, escape being pressed, or a click on the map.

The menu has a div for each items using jQuery .on to attach a click handler to them, whilst when the menu is displayed a keydown handler is attached to the document using .on to check for escape being pressed. These work as desired but I am unable to find a satisfactory solution to detecting a click on the map.

If I use google.maps.event.addListener on the map object to cancel the menu it works, but also registers with the listener to add a marker and event.stopPropagation() does not affect this. ie Cancelling the menu also adds a marker. I believe the Google API triggers the handlers in the order they were added with no way to change the priority.

I have also tried using a jQuery .on handler on the div to which the map is attached. But if I use click or mouseup event it is triggered by the right click which adds the menu. ie The menu flashes on screen as it appears but immediately closes. A mousedown event avoids this problem, but obviously still triggers the Google API handler to add a marker. It also registers the click to drag the map to scroll it, which the Google API does not and would be the preferred behaviour.

So it seems to me there are only two solutions to this problem.

One would be to cancel any handlers on the map when the menu is displayed, then re-add them once it closes. This seems unnecessarily excessive though.

The other is to make wrap the content of the handlers in a conditional statement to detect whether the menu is open. This could be either by using a global variable as a flag or adding a status property to the menu's object.

But this would make the code less reusable and go against the point of having separate event handlers. I may as well just put the code to close the menu in the original handler too.

Is there anything I am missing? It does not seem to be too obscure a thing to want to do but the inability to set the priority of handlers in the Google API means either having to code the handlers around each other.

Answer 1

For what it's worth, I believe your first approach (adding and removing handlers) is the "cleanest" (or most elegant?) approach.

If you think of the handlers as only having use/meaning when the menu is present, from a conceptual perspective, there's no need for them to exist when the menu is not visible.

If you bundle the event-wiring into the same function(s) or method(s) that handle the menu, then it becomes a self-contained, re-usable element that doesn't leave any "garbage" behind.

Since I don't have your code in front of you, here's some pseudocode:

function displayMenu() {
    $menu.show()
      .on('click', function() { /* etc */ });
}

function hideMenu() {
    $menu.hide()
       .off() // remove ALL event handlers
}

Or, even better, encapsulate it in an object:

var menu = {
    show: function() {
       // ...
    }
    hide: function() {
       // ...
    }
};

Or you could use a jQuery function too (though I generally eschew jQuery when I'm working with a map API, just to keep the number of dependencies low).