Different actions for default click and context menu click

plotly.js
1

Hello,

I would like to be able to handle both a normal click and a right-click (or context menu) event for different actions on the same data point.
Following the suggestions in the “Plotly mouse right click/context menu” question, I’ve tried to attach a regular DOM event.

To keep track of the data point, I’m still using plotly_hover and plotly_unhover:

var latestHoveredPoints = null;
gd.on('plotly_hover', function(data) {
  latestHoveredPoints = null;
  if (data && data.points) {
    latestHoveredPoints = data.points;
  }
});
gd.on('plotly_unhover', function(data) {
  latestHoveredPoints = null;
});

After that, I can handle the contextmenu event directly:

gd.addEventListener('contextmenu', function(event) {
  if (latestHoveredPoints != null && latestHoveredPoints.length > 0) {
    console.log("contextmenu: ",
                latestHoveredPoints[0].x,
                latestHoveredPoints[0].y); 
  }
  event.preventDefault();
});

This seems to work reasonably well (although there might be a better way to get to the hovered point than using the plotly_hover and plotly_unhover events).

The problems come when trying to make this work with the “normal” click.

If I also use a DOM click event (see https://codepen.io/anon/pen/mwLZLx ), the click event rarely works when clicking on a bar (it seems to work when clicking on the background).

If I use plotly_click (see https://codepen.io/anon/pen/qjYzKr ), this event is triggered for both the normal click and the contextmenu click.

Is there a better way to achieve this, while being able to separate the types of clicks?

(Tested in Chrome.)

Thank you.

2

Starting in version 1.26.0, plotly_click, plotly_hover and plotly_unhover pass the raw DOM mouse event in their event data. So, you check whether a click event is initiated by a left or a right click which should make much of your logic at lot simpler.

See example codePen: https://codepen.io/etpinard/pen/pwKGNr?editors=0011

Hope this helps.

1 Like