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

• October 22, 2020 at 5:49 pm #31708
  
  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.
  October 23, 2020 at 5:48 pm #31729
  
  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