javascript - 按住 Ctrl 键时拖动时出错

Question

我制作了两个片段，相同的代码，一个在 JSFiddle 中一个作为 Stack Snippet(见下文)。出于某种原因，Ctrl 键 + 拖动会产生不同的结果。

如果我按住 Ctrl 键，JSFiddle 不会触发我的拖动事件，但 Stack Snippet 会。有人可以尝试运行这些吗？我认为这是浏览器或计算机的问题，但也许不是。

var svg = d3.select('svg');

var drag = d3
      .drag()
      .on("start", function() {
        console.log("start");
      })
      .on("drag", function() {
        console.log("dragging");
      })
      .on("end", function() {
        console.log("eneded");
      });

svg.append("g").call(drag).append("circle").attr("cx", 10).attr("cy", 10).attr("r", 8)

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.2.0/d3.min.js"></script>
<svg></svg>

Answer 1

从 D3 版本开始 5.10.0 (由 d3-drag 模块版本 1.2.4 修复 GitHub 问题 #62 引入)按下 Ctrl 键触发的事件被过滤掉，因为在某些情况下 - Ctrl +click 应该打开上下文菜单。 drag.filter() 上的文档你覆盖了吗:

drag.filter([filter]) <>

If filter is specified, sets the filter to the specified function and returns the drag behavior. If filter is not specified, returns the current filter, which defaults to:

function filter() {
  return !d3.event.ctrlKey && !d3.event.button;
}

If the filter returns falsey, the initiating event is ignored and no drag gestures are started. Thus, the filter determines which input events are ignored; the default filter ignores mousedown events on secondary buttons, since those buttons are typically intended for other purposes, such as the context menu.

如您所见，这将忽略任何涉及按下 Ctrl 键的事件。不过，您问题中的代码段使用 D3 v5.2.0，它尚未实现上述更改，因此也确实使用 Ctrl 键监听事件。

要包含这些事件，您可以轻松提供自己的过滤器，它可能只是从原始过滤器中删除 !d3.event.ctrlKey 部分:

.filter(function() { 
  return !d3.event.button;
})

看看下面的工作演示:

const drag = d3
  .drag()
  .filter(() => !d3.event.button)   // Specify the filter
  .on("start", () => console.log("start"))
  .on("drag", () => console.log("dragging"))
  .on("end", () => console.log("ended"))

d3.select('body')
  .append("svg")
  .append("g")
  .call(drag)
  .append("circle")
    .attr("cx", 10)
    .attr("cy", 10)
    .attr("r", 8);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.js"></script>