Question

我正在使用AmCharts，并想知道如何阻止clickGraphItem事件传播到clickGraph事件。

我想阻止它的原因是：

当我点击XY图表中的气泡时，我使用Mustache在图表下呈现一个小表单，其中包含所点击项目的dataContext中的信息。

由于图中有很多气泡，我希望能够在点击后突出显示气泡图上的所选项目，以便让用户知道正在编辑信息的点。

但是，如果用户点击图表上的空白区域（它自己的clickGraph事件），我想触发event.chart.validateData();，以便点击的气泡恢复原始颜色。

我遇到的问题是，当我点击该项目时，我首先获得clickGraphItem事件触发，但这也会触发clickGraph事件。

我试图将event.event.stopPropagation()放在“渲染小胡子并改变泡泡填充”方法的末尾，但这没有任何作用。

我用来处理这两个事件的函数如下：

  function showPointForm(event) {
    var ev = event

    if (ev.item && ev.item.dataContext.data != undefined) {
        var bullet = ev.item.bulletGraphics.node;
        bullet.setAttribute("stroke",colors.info);
        bullet.setAttribute("fill",colors.warning);
        $(document).find('#form-area').html(
          Mustache.render($(document).find('#form-template').html(),{
              data : ev.item.dataContext.data
            })
        )
    }else{
      $(document).find('#form-area').html('')
      event.chart.validateData();
    }
  ev.event.stopPropagation()
  }

var chart = AmCharts.makeChart('div',configObject)
chart.addListener("clickGraphItem",showPointForm);
chart.addListener("clickGraph",showPointForm);

这里的想法是，如果事件来自某个项目，它将更改项目符号和笔划的填充，然后从项目中呈现带有一些数据道具的表单。如果事件没有项目和数据，则渲染的表单将被删除，图表将重新绘制为原始样式。

停止事件传播不会阻止clickGraph事件被触发

关于我在这里做错了什么想法？

由于

解：事实证明，我试图实现的目标不是通过标准AmCharts API支持的。 {/ 1}}事件不会在气泡/ XY图表的空白处触发。相反，我将一个事件附加到clickGraph的{{1}}事件中。

click

所以现在当我点击一个气泡时，之前使用.amcharts-plot-area类设置样式的所有气泡都删除了该类。然后点击的气泡添加了它。

但是当function showPointForm(event) { var ev = event if (ev.item && ev.item.dataContext.data != undefined) { $(document).find('.highlight').each(function(){ $(this).attr('class', 'amcharts-graph-bullet'); }) var bullet = ev.item.bulletGraphics.node; bullet.setAttribute("class",'highlight amcharts-graph-bullet'); $(document).find('#form-area').html( Mustache.render($(document).find('#form-template').html(),{ data : ev.item.dataContext.data }) ) }else{ $(document).find('#form-area').html('') event.chart.validateData(); } } function reset(){ $(document).find('#form-area').html('') timelineChart.validateData(); } var chart = AmCharts.makeChart('div',configObject) chart.addListener("clickGraphItem",showPointForm); $(document).on("click",'.amcharts-plot-area',reset);中有点击事件时，会调用highlight函数，该函数会再次删除所有突出显示的类。

这解决了我的问题，但如下所述，不可能停止事件传播。

Answer 1

没有办法阻止图表事件传播。图表事件名称在type属性中传递，因此您可以使用它来确定所需的流。它并不漂亮，但你可以做的就是：

function showPointForm(event) {
  if (event.type == "clickGraphItem") {
   // logic for clickGraphItem only
  }
  else {
    // logic for clickGraph
  }
}

当clickGraphItem被触发时，你也可以在图表中设置一个自定义标志，表明它刚被触发，所以你知道如果它被冒泡就不会执行任何额外的逻辑，例如：

function clickGraphHandler(event) {
  if (event.type == "clickGraphItem") {
    event.chart.clickGraphItemFired = true;
    console.log('clickGraphItem')
  } else {
    if (event.chart.clickGraphItemFired) {
      event.chart.clickGraphItemFired = false;
      console.log('clickGraph - bubbled from clickGraphItem');
    } else {
      console.log('clickGraph - not bubbled from clickGraphItem')
    }
  }
}

Demo

AmCharts，停止'clickGraphItem'事件传播到'clickGraph'

1 个答案: