无益的Github discussion让我在这里提出这个问题：
更改为新的v4.0 D3后,似乎使用d3.zoom()blocks some events,如：
打电话给：
svg.call(d3.zoom()
.scaleExtent([1,40])
.translateExtent([[-100,-100],[width + 90,height + 100]])
.on("zoom",zoomed));
然后这个：
document.querySelector('svg').addEventListener('mouseup',function(){ alert(1) })
单击SVG上的任何位置时不会发出任何警报.
我真的不想这样做：
window.addEventListener("mouseup",function(e){
if( [target or target parent is the specific SVG element] ){
// do something
}
}
因为这将在窗口上引入全局非命名空间事件mouseup(此技术似乎仅适用于窗口对象),并且此事件可能会在其他位置删除,或者多次发生. (封装它并不容易,或者我根本不知道如何).
关于如何在SVG上捕获mouseup事件的更好的想法？
与我的另一个问题有关：Event capturing namespace
更新：
在Mark的回答的帮助下,这是working demo
最佳答案
仍然不确定我理解你的意图,但你可能从错误的角度接近这个.而不是尝试添加自己的事件,只需在缩放行为提供的事件中工作.缩放功能提供平移,其中mousedown开始平移(即缩放开始事件)并且mouseup结束平移(即缩放结束事件).那么,真正的问题是,你怎么能区分泛与“点击”鼠标？要做到这一点,只需检查用户是否移动了鼠标：
svg.call(d3.zoom()
.scaleExtent([1,40])
.translateExtent([[-100,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)));
}
更新fiddle.
