v4.0 - d3.zoom() prevents binding events on the SVG or it's elements

After changing to the new v4.0 D3, seems like using d3.zoom() blocks other events somehow, like:

Calling this:

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) })

Won’t alert anything.

Demo page

[IPWright83]

I came across this too, and have just played around a little. I was a bit confused by @mbostock’s comment regarding the d3.event.stopPropagation() because I couldn’t seem to see that working.

If however you go a little further, you can prevent the zoom kicking in when clicking on say a circle, by ensuring that you stopPropagation of the mousedown, preventing the zoom from ever triggering.

const zoom = d3.zoom().on("zoom", () => {
    console.log("zoomed");
});

d3.select("svg").call(zoom);

d3.select("svg")
    .selectAll("circle")
    .on("mousedown", () => {
        // Without this, clicking the circle will never trigger a mouseup, because zoom will handle mouseup
        d3.event.stopPropagation();
        console.log("mousedown");
    })
    .on("mouseup", () => {
        d3.event.stopPropagation();
        console.log("mouseup");
    });

using DOM:

<svg width="500" height="500">
  <circle cx="150" cy="150" r="50" />
</svg>

[mbostock]

Sorry, but no. I expect you can achieve your desired result without modifying the zoom implementation, but I don’t have time right now to make a more specific example for you other than the ones I have already linked (and are linked from the README).

If you want to allow the zoom gesture but still listen to a mouseup handled by the zoom behavior then again I recommend listening to the zoom behavior’s end event so that you can do something on the end of a zoom gesture (or specifically mouseup by looking at d3.event.sourceEvent).

Alternatively I expect you could still intercede on the mouseup event by using a capturing listener (passing true as the third argument to selection.on). You might need to listen to the window rather than the specific element you want to receive the mouseup, though, since capturing events bubble the other way.

Anyhow, I am afraid this is all the help I can provide. If you want further assistance please try Stack Overflow tag d3.js or the d3-js Google group. I am currently on vacation.