javascript - 事件多次调用

Question

在融合图表中，一旦我单击图例，那么如果我单击向下钻取点，则意味着单击事件正在调用多次，因为显示了多个向下钻取弹出窗口...

指令

angular
  .module("rootApp")
  .directive('fchart', function(chartExportService, $timeout, $uibModal, chartDrillDownService, appNotifyService) {
      return {
        restrict: "E",
        scope: {
          cid: '@',
          dataformat: '@',
          width: '@',
          height: '@',
          dataSource: '@',
          type: '@',
          charts: '=',
          control: '=',
          data: '@'
        },
        link: function(scope, element, attrs) {
          scope.internalControl = scope.control || {};

          var chart = null;
          var exportList = [];
          var agentData = {};
          scope.actionAfterExport = 'print';

          var chartConfigObject = {
            type: scope.type,
            width: scope.width,
            height: scope.height,
            renderAt: element[0],
            id: scope.cid,
            dataFormat: scope.dataformat || 'json',
            dataSource: attrs.datasource,
            events: {
              "beforeExport": function(evtObj, argObj) {
                var exportStatus = document.getElementById('chart-export-status');
                if (exportStatus) {
                  exportStatus.style.display = 'inline';
                }
              },
              "exported": function(eventObj, dataObj) {
                var exportStatus = document.getElementById('chart-export-status');
                if (exportStatus) {
                  exportStatus.style.display = 'none';
                }
              },
              "dataplotclick": function(ev, props) {


              }
            }
          };

          // Register methods for chart drill down calls from fusion chart
          // As fusion chart look for those methods in window scope, these
          // functions needs to be registered in window scope

          window.chartDrillDown = function(info) {
            chartDrillDownService.doDrillDown('chartDrillDown', info);
          };

          window.popupforTop10StnAndFisPCharts = function(info) {
            var test = true;
            if (test) {
              chartDrillDownService.doDrillDownFisPChart('popupforTop10StnAndFisPCharts', info);
            }
            test = false;
          };

          window.activityCountJs = function(info) {
            chartDrillDownService.doDrillDown('activityCountJs', info);
          };

          window.chartPopUpForTop10ByStationCharts = function(info) {

            chartDrillDownService.doDrillDownFisPChart('chartPopUpForTop10ByStationCharts', info);
          };

          window.chartDrillDownForLabels = function(info) {
            chartDrillDownService.doTreeDrillDown('chartDrillDownForLabels', info);
          };

          window.Reveal = {};
          window.Reveal.PlantView = {
            DrillHandler: {}
          };
          window.Reveal.Compare = {
            DrillHandler: {}
          };

          window.Reveal.PlantView.DrillHandler.PopupActivity = function(info) {
            chartDrillDownService.doDrillDown('PlantView-PopupActivity', info);
          };

          window.Reveal.PlantView.DrillHandler.DrillActivity = function(info) {
            chartDrillDownService.doDrillDown('PlantView-DrillActivity', info);
          };

          window.Reveal.Compare.DrillHandler.DrillHours = function(info) {
            chartDrillDownService.doDrillHours('Compare-DrillHours', info);
          };

          window.Reveal.Compare.DrillHandler.DrillWeekly = function(info) {
            chartDrillDownService.doDrillWeekly('Compare-DrillWeekly', info);
          };

          window.Reveal.Compare.DrillHandler.DrillDay = function(info) {
            chartDrillDownService.doDrillDay('Compare-DrillDay', info);
          };

          var createFCChart = function() {
            // dispose if previous chart exists
            if (chart && chart.dispose) {
              chart.dispose();
            }

            // Setting to make FusionCharts rendering properly when <base> tag included in HTML head 
            FusionCharts.options.SVGDefinitionURL = 'absolute';

            chart = new FusionCharts(chartConfigObject);

            /* @todo validate the ready function whether it can be replaced in a better way */
            angular.element(document).ready(function() {
              element.ready(function() {
                // Render the chart only when angular is done compiling the element and DOM.
                chart.showBorder = 0;
                chart = chart.render();
                chart.uniqueId = scope.data || null;

                if (scope.charts) {
                  scope.charts.push(chart);
                }
              });
            });
          };
        };

如有任何指点，我们将不胜感激!

Answer 1

该事件可能被 DOM 层次结构中的多个目标调用。通过使用 console.log'ing 输出事件的当前目标来验证这一点。 Reference

如果是这种情况，则停止此情况的一种方法是对事件调用 stopPropagation()。 Reference

可以取消注释行以测试您的情况:

"beforeExport": function(evtObj, argObj) {
// console.log(evtObj.currentTarget);
var exportStatus = document.getElementById('chart-export-status');
if (exportStatus) {
    exportStatus.style.display = 'inline';
}
//evtObj.stopPropagation();

}