javascript - 右键单击 Plotly.js 显示自定义菜单

Question

当用户右键单击图表而不是默认菜单时，是否可以显示自定义子菜单？

Answer 1

您可以将事件添加到 contextmenu 绘图容器。

这是对 contextmenu 文档的引用 - https://developer.mozilla.org/en/docs/Web/Events/contextmenu

您将阻止上下文菜单的默认行为，以便浏览器的默认上下文菜单不会与您的菜单重叠。

你可以用这个

document.querySelector('#plotly-container').addEventListender('contextmenu', function(event) {
    event.preventDefault();

    // Your code here
});

在回调函数中，您需要使用 event.clientX 和 event.clientY 确定鼠标位置，并将容器绝对定位在这些坐标上。

您可以引用这个问题来了解如何在鼠标位置旁边创建一个 div 容器。

How do I position a div next to a mouse click using JQuery?

你可以引用这个问题来了解更多关于如何绑定(bind) contextmenu 事件。

How can I capture the right-click event in JavaScript?