How to handle mouse click event on both strip lines and canvas data point click

[Rami Mitri]

Hi,

We have included data point click event ,in that made to show context menu

Also we included strip line defined with start and end date to it. To canvas chart we included add event linsener mouse down to get strip line pop up base on clicked position.

function LTEq_addEventListenertoCanvasChart() {
    $("#LTEq_chartContainer .canvasjs-chart-canvas").last().on("mousedown", function (e) {
        var tempAxisXStrippes = LTEq_canvasChart.axisX[0].stripLines;
        var phaseInfo;
        var pStDt, pEndDt;
        LTEq_isUserRightClickedOnPhaseBand = false;
        if (tempAxisXStrippes.length > 0) {
            for (var i = 0; i < tempAxisXStrippes.length; i++) {
                var parentOffset = $(this).parent().offset();
                var xPos = e.pageX - parentOffset.left,
                    yPos = e.pageY - parentOffset.top,
                    bounds = LTEq_canvasChart.axisX[0].stripLines[i].bounds;
                if ((bounds != undefined && bounds.x1 != undefined && bounds.x2 != undefined && bounds.y1 != undefined && bounds.y2 != undefined) &&
                    ((bounds.x1 <= xPos && xPos <= bounds.x2) && (bounds.y1 <= yPos && yPos <= bounds.y2))) {
                    phaseInfo = tempAxisXStrippes[i].options.tag;
                    var jsParsePh = JSON.parse(phaseInfo);
                    pStDt = new Date(jsParsePh.PhaseStDt);
                    pEndDt = new Date(jsParsePh.PhaseEndDt);
                    LTEq_isUserRightClickedOnPhaseBand = true;
                    break;
                }
            }
        }
        if (phaseInfo != undefined) {
            LTEq_constructPhaseUpdatePopup(phaseInfo, pStDt, pEndDt);
        }
    });
}

Issue we are facing is that when plot contains data points and strip line , when user wanted to click data point to get context menu, instead they get strip line pop up.
We tried to resolve this issue by getting strip line pop up on right click , for that included if statement e.which==3 to LTEq_addEventListenertoCanvasChart function. This resolved issue , able to get strip line pop up when right clicked on strip lines and data point contest menu on left click on data point . But we were getting browser context menu on right click along with that strip line pop up.

Please provide solution to avoid browser context menu or disable back and reload functionality of browser context menu .

1.Tried to prevent browser context menu but it also prevented data point custom context menu
2. Then tried to disable back functionality of browser context menu , solution from stackoverflow which prevent previews page load functionality, but it refreshes current page which is not our requirement, we don’t want to refresh current page

[Rami Mitri]

data point click we context menu image
https://imgur.com/T5iufeT

[Rami Mitri]

when user click data poinr with strip lines behind
https://imgur.com/jk4ue8j

[Rami Mitri]

plot with strip lines image
https://imgur.com/r4rSr6H

when user tries to click data point with strip lines behind, image
https://imgur.com/jk4ue8j

[Indranil]

@spectra,

You can restrict click event from being fired for both stripLine and dataPoint simultaneously as shown in this JSFiddle.

Considering this thread as a duplicate of How to handle mouse click event on both strip lines and data point and hence closing the same.

___________
Indranil Deo
Team CanvasJS