javascript - 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. A <g>元素，作为一个容器，将采用其内容的大小，这些内容负责鼠标事件；
2. mouseup确实会触发，正如您在此处看到的(仅将 <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] 在鼠标按钮释放后继续触发，我该如何清除 [it]？”。

只要通过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>