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

标签 javascript plotly

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

Default right click

最佳答案

您可以将事件添加到 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.clientXevent.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?

关于javascript - 右键单击 Plotly.js 显示自定义菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44819571/

相关文章:

javascript - 将 react 类组件转换为功能组件的快速方法?

python - Plotly:如何对两个不同图的类别使用相同的颜色?

plotly和R中的rgb透明颜色

python - Plotly:如何调整轴标签和绘图区域之间的空间?

javascript - 使用 JavaScript 加载外部 HTML

javascript - 在 PHP 中获取禁用文本框的值

python - 使用 Plotly 的热图和树状图(聚类图)错误

Plotly:同一图中的散点图和动画线图

javascript - 在样式表中快速切换 rems 和像素

javascript - 图标不会随 Firefox 或 IE 中的类更改而更改