javascript - 尽管调用了 off() ，事件仍在继续处理

Question

我希望在单击图表时停止在图表上执行我的所有事件。然而，尽管我愿意，这些该死的处理者还是被处决了。我怀疑我的目标元素与我的意图不同。不过，这让我很困惑。

如the fiddle举例来说，单击任何扇区都会使环变绿。然后，我希望图例文本不会在现有的剩余环形区域中重新出现。

var grx = chart.selectAll(".sector").data(pie(dataPoints))
  .enter().append("g").attr("class", "sector")
  .on("mouseenter", function (target) {
    $(".legendMain").animate({ opacity: 0 }, { queue: false });
  })
  .on("mouseleave", function () {
    $(".legendMain").animate({ opacity: 1 }, { queue: false });
  })
  .on("click", function (target) {
    $("#chart .sector path").css("fill", "rgb(0,111,0)");
    d3.selectAll("#chart .sector path")
      .transition().duration(1000).attr("d", out);

    //d3.selectAll("#chart .sector text").remove();
    $(".sector").off();
    $("path").off();
    $("g").off();
  });

我尝试关闭g、路径和文本以及所有.sector 类元素。没有任何帮助。我是否选择了错误的组件？如何检查谁在持有事件处理程序？处理是否因为D3下的数据绑定(bind)而卡住？

我很确定那里有一些奇怪的东西 - 或者至少是高度反直觉的 - 因为我已经尝试执行以下操作并且事件仍然发生(文本正在淡入/淡出)。

$("*").off();

Answer 1

您正在混合 d3 和 jquery 事件绑定(bind)。如果您使用 selection.on 创建 d3 事件处理程序，则删除它的正确方法是:

d3.selectAll(".sector").on('mouseenter', null);

已更新fiddle .