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

时间:2017-06-29 08:08:26

标签: javascript plotly

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

this overload

1 个答案:

答案 0 :(得分:2)

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

您可以参考此问题,详细了解如何绑定contextmenu事件。

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