Mousemove within mousedown stops mouse up firing

Question

I'm capturing the mouse position within a SVG group ( <g> ) while the mouse is held down.

However, the mousemove continues firing after the mouse button is released and any attempt to attach a mouseup event is ignored.

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

Two considerations:

1. A <g> element, as a container, will take the size of its content, which are the responsible for the mouse events;
2. The mouseup does fire, as you can see here (only changing the <g> for the <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>

Therefore, you have just one answerable question here: "[mousemove] continues firing after mouse button released, how do I clear [it]?" .

Just pass null to the event handler:

selector.on("mousemove", null);

Here is the demo:

 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>