Question

我在我的应用程序中使用Google Maps API。我在右键单击按钮处理程序的地图上添加了自定义上下文菜单。它在Mac上的所有浏览器上都可以正常运行。除了Google Chrome和Mozilla Firefox（在Windows OS上）以外，它们在Windows上的IE和Edge上都可以正常工作，除了显示自定义菜单之外，还显示实际的浏览器上下文菜单。

这里是jsfiddle，其中包含示例代码，其行为与我的代码相似。

请在不同的浏览器中的Windows上检查上面的小提琴，然后右键单击地图，您会看到在Chrome和Firefox上显示两个菜单，而在Edge上仅显示自定义菜单（这是预期的行为，并且也可以正常工作）在Mac上）。

var ContextMenu = document.getElementById("my-context-menu");

 google.maps.event.addListener(map, 'rightclick', function (ev) {
    ShowContextMenuGoolge(ContextMenu, ev);

            /** this stop NOT stopping DOM 'context-menu' event from firing */
            ev.stop();

});

google.maps.event.addListener(map, 'click', function () {

    HideContextMenuGoolge(ContextMenu);
});
}

预期的行为（Mac中的Chrome截图）

实际发生的情况（Windows中的Chrome截图）：

Answer 1

我已经在FireFox和Google Chrome上测试了该解决方案，因此只需在您的js文件的最顶部添加以下代码即可：

window.onload = (function(){
    document.addEventListener("mouseup", function(evt){
        console.log(evt)
        evt.preventDefault();
        evt.stopPropagation();
    });
    document.addEventListener("contextmenu", function(evt){
      console.log(evt);
      evt.preventDefault();
      evt.stopPropagation();
  });
})();

也请删除ev.stop() method，因为它不会执行任何操作。见下文。

浏览器中的JavaScript是事件驱动的，这意味着JavaScript 通过生成事件来响应交互，并期望程序听有趣的事件。用户事件（例如“点击”鼠标事件）是从DOM传播到Maps JavaScript API的。这些事件与标准DOM事件是分开的并且与众不同。

See this link for the above reference

还要注意，在浏览器中通过right-click event禁用contextmenu可能不是理想的解决方案。我建议您再进行一次研究。

Answer 2

我只花了半天的时间来解决这个完全相同的问题，这里发布的解决方案以及关于此问题的其他几个主题对我来说都不行。这是做什么的：

// Add a listener to the Intelligence Bounds to serve a context menu
google.maps.event.addListener(myPolygon, 'rightclick', (evt) => {
  if (evt.vertex && myPolygon.getPath().getLength() > 4) { // Don't let them delete a node if it would turn us into a line

// Set timeout is used only because it solves the issue of Windows Chrome/Firefox browser context menu overlaying our own
setTimeout(this.onVertexRightclick, 0, evt.vertex, this)
  }
});

老实说，我不明白为什么会这样，但我很高兴有人发布了它。将事件处理过程包装在设置为零毫秒的setTimeout（）中是唯一可行的解决方案。

我看到的所有其他修补程序都与3.0 Maps API有关，并于2018年发布。我使用的是2019年发布的更新的Angular小部件，应该简化使用并将其包装为我的理解，所以也许就是这种情况。

在Google地图上添加自定义菜单后，浏览器上下文菜单不会消失（在Windows-Chrome和Firefox中）

2 个答案: