时间戳

首页 > 解决方案 > 在 Google 地图上添加自定义菜单时，浏览器上下文菜单不会消失（在 Windows - Chrome 和 Firefox 中）

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

问题描述

我在我的反应应用程序中使用 Google Maps API。我在右键单击按钮处理程序的地图上添加了一个自定义上下文菜单。它在 Mac 上的所有浏览器上都运行良好。在 Windows 上的 IE 和 Edge 上运行良好，除了 Google Chrome 和 Mozilla Firefox（在 Windows 操作系统上），除了显示自定义菜单外，实际的浏览器上下文菜单也会出现。

这是一个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 的屏幕截图）：

在此处输入图像描述

标签： javascriptreactjsgoogle-mapsgoogle-maps-api-3contextmenu

解决方案

我已经在 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 事件是分开且不同的。

请参阅此链接以获取上述参考

另请注意，在浏览器中禁用right-click eventviacontextmenu可能不是理想的解决方案。我建议您进行额外的研究。

推荐阅读