D3 v4 - d3.zoom () prevents the binding of some events except the window

Question

The Unhelpful Github discussion made me ask this question here:

---

After the transition to the new v4.0 D3, it seems that using d3.zoom() blocks some events , for example:

Call:

 svg.call(d3.zoom() .scaleExtent([1, 40]) .translateExtent([[-100, -100], [width + 90, height + 100]]) .on("zoom", zoomed)); 

And then this:

 document.querySelector('svg').addEventListener('mouseup', function(){ alert(1) }) 

Will not warn anything when clicked anywhere SVG.

I really don't want to do:

 window.addEventListener("mouseup", function(e){ if( [target or target parent is the specific SVG element] ){ // do something } } 

Because this will result in a global mouseup event, which does not contain names, in the window (this method seems to work only with the window object), and this event can be deleted somewhere else or it will happen several times. (Encapsulating it is not easy, or I just don’t know how to do it).

Any better ideas on how to capture mouseup events on SVG?

---

In connection with my other question: Namespace capture event

Demo page

---

Update:

With Mark's answer, here's a working demo

Answer 1

Still not sure I understand your intentions, but you can approach this from the wrong angle. Instead of trying to add your own events, just work within the events provided by the scaling behavior. The zoom function provides panning when mousedown starts panning (i.e., start zoom event), and mouseup finishes panning (i.e. end zoom event). So the real question is, how can you tell the panorama against the w1030 mouse? To do this, simply check if the user has moved the mouse:

 svg.call(d3.zoom() .scaleExtent([1, 40]) .translateExtent([[-100, -100], [width + 90, height + 100]]) .on("start", zoomstart) .on("end", zoomend) .on("zoom", zoomed)); var mousePos = null; function zoomstart(){ mousePos = d3.mouse(this); } function zoomend(){ var m = d3.mouse(this); if (mousePos[0] === m[0] && mousePos[1] === m[1]){ alert('mouseup'); } } function zoomed() { svg.attr("transform", d3.event.transform); gX.call(xAxis.scale(d3.event.transform.rescaleX(x))); gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); } 

Refresh fiddle .