Kendo UI Chart disable legend item right click event

Question

I have an application that uses a Kendo UI Chart with a legend. When the user clicks on a legend item, the Kendo onLegendItemClick(e) method gets called. However the event that gets passed to this function does not contain the originalEvent , so there is no way to distinguish between right and left clicks.

Here is the relevant API reference: https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemclick

I tried adding an event listener and capturing the 'mousedown' event before onLegendItemClick is invoked as shown below. However, this approach will fail on touch screen devices (iPads, tablets, mobile devices, etc).

document.addEventListener("mousedown", saveMouseDown, true);

function saveMouseDown(ev) {
    $scope.mouseDownEvent = ev;
}

$scope.$on("$destroy", function () {
    document.removeEventListener(saveMouseDown);
});

The application has a separate directive for handling right clicks. Is there a way to prevent Kendo from calling the onLegendItemClick(e) method when a user right clicks the legend item?

Answer 1

Add "click" to the list of saved events ¹ :

document.addEventListener("mousedown click", saveEvent, true);

function saveEvent(ev) {
    $scope.savedEvent = ev;
}

$scope.$on("$destroy", function () {
    document.removeEventListener(saveEvent);
});

Related question: How to prevent right click from deselecting marker in Kendo-UI