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

[Rami Mitri]

Hi,

We have include click event to data points in that made to show context menu

Also for add strip lines included event listener function to get strip line popup on mouse down click

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 when plot contains both data points and strip line , user wants to click data point to get custom context menu, but we get strip line popup.
To resolve this issue tried to get strip lines popup when right clicked on strip line (e.which ==3 in add event listener function), it worked we get strip line popup when right clicked and data point context menu when left clicked on data points even when strip line exists behind it. Issue we faced is that with right click we get browser context menu which we don’t want to get.

Can you people provide a solution to avoid browser context menu or disable back& reload functionality of browser context menu

• This topic was modified 4 years, 1 month ago by Rami Mitri.

[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