Question

我有一张地图，google.maps.event.addListener对象设置了map，用于click个事件，以便在地图上放置标记。现在我想为标记添加一个上下文菜单，所以我在floatPane中创建了一个自定义叠加层。再次google.maps.event.addListener用于向每个标记添加rightclick事件，以定位和显示菜单。

显示菜单后，我希望通过选择菜单项，按下退出或点击地图来清除它。

每个项目的菜单都有一个div，使用jQuery .on将click处理程序附加到它们，而当显示菜单时，附加了keydown处理程序document使用.on来检查是否按下了转义符。这些工作符合要求，但我无法找到一个满意的解决方案来检测地图上的点击。

如果我在google.maps.event.addListener对象上使用map取消它可以使用的菜单，还会向监听器注册以添加标记，而event.stopPropagation()不会影响这一点。即。取消菜单也会添加标记。我相信Google API会按照添加的顺序触发处理程序，而无法更改优先级。

我还尝试在附加地图的.on上使用jQuery div处理程序。但是，如果我使用click或mouseup事件，则会通过右键单击触发添加菜单。即。菜单在屏幕上闪烁，但会立即关闭。 mousedown事件可以避免此问题，但显然仍会触发Google API处理程序添加标记。它还会记录点击以拖动地图以滚动它，Google API不会将其作为首选行为。

所以在我看来，这个问题只有两个解决方案。

当显示菜单时，可以取消地图上的任何处理程序，然后在关闭时重新添加它们。但这似乎不必要地过度了。

另一种方法是在条件语句中包装处理程序的内容以检测菜单是否打开。这可以是通过使用全局变量作为标志或将状态属性添加到菜单的对象。

但这会使代码不再可重用，并且与使用单独的事件处理程序相悖。我也可以把代码放在原始处理程序中关闭菜单。

我有什么遗漏的吗？看起来似乎并不太晦涩，但是无法在Google API中设置处理程序的优先级意味着要么必须围绕彼此编写处理程序。

Answer 1

对于它的价值，我相信你的第一种方法（添加和删除处理程序）是最干净的＆＃34; （或最优雅的？）方法。

如果您认为处理程序仅在菜单存在时具有使用/含义，从概念的角度来看，当菜单不可见时，它们不需要存在。

如果您将事件连接捆绑到处理菜单的相同功能或方法中，那么它将成为一个不会留下任何＆＃34的独立，可重复使用的元素。 ;垃圾＆＃34;后面。

由于我没有将代码放在你面前，所以这里有一些伪代码：

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

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

或者，更好的是，将其封装在一个对象中：

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

或者你也可以使用jQuery函数（虽然我通常在使用map API时避开jQuery，只是为了保持较低的依赖数）。

Google Maps API事件监听器优先级

1 个答案: