D3 v4 - d3.zoom() prevents binding some events except on the Window
<p><em>Unhelpful Github <a href="https://github.com/d3/d3/issues/2887" rel="nofollow noreferrer">discussion</a> led me to ask this question here:</em></p>

<hr>

<p>After changing to the new v4.0 D3, seems like using <code>d3.zoom()</code> <a href="https://github.com/d3/d3-zoom#api-reference" rel="nofollow noreferrer">blocks some events</a>, like:</p>

Calling this:

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

And then this:

<pre><code>document.querySelector('svg').addEventListener('mouseup', function(){ alert(1) })
</code></pre>

<p>Won't alert anything when clicking anywhere on the SVG.
<br><br><br></p>

<p>I really <em>don't</em> want to do:</p>

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

<p>Because this will introduce a global non-namespaced event <code>mouseup</code> on the window (this technique seems to <em>only</em> work on the <code>window</code> object) and this event might be removed somewhere else, or happen multiple times. (It isn't easy to encapsulate it, or I simply don't know how). </p>

<p>Any better ideas on how to capture <code>mouseup</code> events on the SVG?</p>

<hr>

<p>Related to another question of mine: <a href="https://stackoverflow.com/q/38572501/104380">Event capturing namespace</a></p>

<h3><a href="https://jsfiddle.net/fqq6g8ms/6/" rel="nofollow noreferrer">Demo page</a></h3>

<hr>

<h2>Update:</h2>

<p>With the help of Mark's answer, here's the <a href="https://jsfiddle.net/fqq6g8ms/12/" rel="nofollow noreferrer">working demo</a></p>