javascript - 当我在 D3 中触发的事件中删除相应的元素时，如何删除元素的事件监听器？

Question

当我在D3中触发的事件中删除相应元素时，如何删除元素的事件监听器？

现在，在我调用 .remove() 之后，事件似乎仍然存在。

例如，我有一个监听 mousedown 的事件监听器，如果我一直 mousedown 并使用我的键盘删除相应的元素，mousedown 事件仍然存在。这是预期的吗？

更具体地说，我正在处理我的元素调用的 d3.drag() 函数。

如果是这样，有没有办法一次清除所有这些，还是我需要手动删除它们？如何消除挥之不去的事件？

以下为转载链接:https://jsfiddle.net/38wtj4y0/33/

尝试拖动矩形，不要松开鼠标。按下一个键，矩形就会消失，但是当你四处移动鼠标时(仍然是 mousedown)，你会看到控制台仍在打印“拖动”

更新

@Gerardo Furtado 下面的回答仍然是一种解决方法 hack，即使用 if 语句使所有触发的函数返回。换句话说，如果用户不释放mousedown，在后台，这个拖动功能仍然会一直触发，只是他们什么都不做，因为他们会回来。这仍然是对资源的彻底浪费。

我能想到的导致此问题的唯一解释是 D3 只能在事件监听器不再处于事件状态时将其删除，即它必须等待用户释放。因此，我需要一种方法来释放所有触发的用户交互。

Answer 1

这是一个有趣的问题，尽管我不得不承认，我从未在现实世界的应用程序中遇到过这个问题。发生这种情况的原因可以在 D3 的拖动实现的内部工作机制中找到。

首先，值得一提的是，如果您从 DOM 树中删除一个元素，则在对指针事件执行 HitTest 时，该元素将不再成为目标。因此，不会再执行在该元素上注册的事件监听器。这是人们期望的行为，也是您感到困惑的原因，因为在您的 JSFiddle 中，即使元素已成功删除，监听器似乎仍在执行。

要了解发生了什么，您必须深入研究 source code d3.drag()。初始化拖动行为registers选择元素的各种事件处理程序:

function drag(selection) {
  selection
      .on("mousedown.drag", mousedowned)
  //...
}

监听 mousedown 事件的处理程序不会在相应元素上触发此类事件之前设置其余的拖动行为。一旦拖动行为的元素接收到 mousedown 事件，内部 mousedowned()处理程序将被执行:

function mousedowned() {
  //...
  select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
  //...
}

在此处理程序中，一个 "mousemove.drag" 和一个 "mouseup.drag" 监听器在 event.view 上注册。这view MouseEvent 的属性继承自 UIEvent接口(interface)，并且——至少在浏览器中——指向发生事件的 Window 对象。全局 window 上的那些拖动处理程序被 d3-drag 用来完成它的工作。这些处理程序应对您目睹的看似令人困惑的行为负责。我们很快就会谈到这一点，首先让我们检查一下随后如何删除监听器。

当拖动手势最终通过触发 mouseup 事件结束时，这些处理程序将从函数 mouseupped() 中的 window 对象中删除:

function mouseupped() {
  select(event.view).on("mousemove.drag mouseup.drag", null);
}

现在，让我们再看一下您的代码。即使您删除了由 keydown 事件触发的拖动行为的目标，window 上的上述处理程序仍然存在，因为您一直按下鼠标按钮，从而抑制 code>mouseup 事件被触发。因此，mouseupped() 处理程序尚未执行。这将使拖动行为保持事件状态，因为 mousemove 事件仍由 window 上拖动的内部处理程序捕获。此外，这些内部处理程序还将继续委托(delegate)给您自己的 dragged 处理程序，从而导致您看到的控制台输出。

正如本文开头所述，我从未见过这会在现实世界中造成任何麻烦。如果您仍然想避免这种行为，您可以在删除目标后删除内部处理程序:

d3.select(window).on("keydown", function() {
    d3.select(".draggable-rect").remove();
    d3.select(d3.event.view)          // Remove global (internal) drag handlers 
      .on("mousemove.drag", null)
      .on("mouseup.drag", null);
})

当涉及到摆弄某些库的内部工作时，情况总是如此，您必须小心不要破坏其他东西，并记住这有可能在 D3 的任何 future 版本中悄无声息地破坏.

看看这个工作演示:

d3.select("svg").append('rect').attr('class', 'draggable-rect');
                               
d3.select(window).on("keydown", function() {
	d3.select(".draggable-rect").remove();
  d3.select(d3.event.view)
    .on("mousemove.drag", null)
    .on("mouseup.drag", null);
})

d3.select(".draggable-rect")
  .call(d3.drag().on("start", dragstarted)
  					 		 .on("drag", dragged)
      	     		 .on("end", dragended));

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
	console.log("dragging")
  d3.select(this).attr("x", d3.event.x - 40).attr("y", d3.event.y - 40);
}

function dragended(d) {
  d3.select(this).classed("active", false);
}

.test-area {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

svg {
  width: 400px;
  height: 400px;
}

.draggable-rect {
  width: 80px;
  height: 80px;
  fill: green;
}

<script src="https://d3js.org/d3.v4.js"></script>
<div class="test-area">
  <svg>
  </svg>
</div>