mousedown 中的 Mousemove 停止鼠标向上触发

Question

我在按住鼠标的同时捕获 SVG 组 ( <g> ) 中的鼠标位置。

但是，在释放鼠标按钮后， mousemove继续触发，并且会忽略任何附加mouseup事件的尝试。

var ternary = d3.select("#ternary");

var pointer;
var selector = ternary.append("g");

selector.on("mousedown", function() {
  console.log('down');

  selector.on("mousemove", function() {
    console.log('move');
    var mouse = d3.mouse(this);
    console.log(mouse[0])
    console.log(mouse[1]);
    // continues firing after mouse button released 
    // how do I clear?
  });

  selector.on("mouseup", function() {

    alert('release');
    //this event doesnt fire
  });
});

Answer 1

两个考虑：

1. <g>元素，作为一个容器，将采用其内容的大小，它负责鼠标事件；
2. mouseup确实触发了，正如您在此处看到的（仅更改<svg>的<g> <svg> ）：

 var selector = d3.select("svg"); selector.on("mousedown", function() { console.log('down'); selector.on("mousemove", function() { console.log('move'); var mouse = d3.mouse(this); console.log(mouse[0]) console.log(mouse[1]); // continues firing after mouse button released // how do I clear? }); selector.on("mouseup", function() { alert('release'); //this event doesnt fire }); });

 svg { background-color: tan; }

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg></svg>

因此，您在这里只有一个可回答的问题： “[mousemove] 在释放鼠标按钮后继续触发，我如何清除 [它]？” .

只需将null传递给事件处理程序：

selector.on("mousemove", null);

这是演示：

 var selector = d3.select("svg"); selector.on("mousedown", function() { console.log('down'); selector.on("mousemove", function() { console.log('move'); var mouse = d3.mouse(this); console.log(mouse[0]) console.log(mouse[1]); // continues firing after mouse button released // how do I clear? }); selector.on("mouseup", function() { selector.on("mousemove", null); alert('release'); //this event doesnt fire }); });

 svg { background-color: tan; }

 <script src="https://d3js.org/d3.v5.min.js"></script> <svg></svg>