我有一个程序，允许用户通过两个 2D 切片（在两个窗口中）探索 3D 功能。该函数在两个表中进行编码，每个表对应一个维度。要选择一个窗口中显示的切片，用户启用“editDim”复选框，然后在另一个窗口中单击并拖动。未选中“editDim”时，用户可以平移和缩放每个窗口。问题是，在“editDim”模式下，如果我单击并拖动鼠标光标移出粉红色阴影绘图区域，则平移缩放开始。我已将简化版本放入 jsfiddle，http:// jsfiddle.net/eric_l/PB6aK/。
我添加了显示鼠标事件的日志消息，当不单击拖动（正常鼠标移动）时，我看不到绘图区域周围的区域的事件。
this.zoom = d3.behavior.zoom().x(self.xscale).y(self.yscale).on("zoom", function() {self.redraw() } );
this.div = d3.select(this.anchor).append("div");
this.svg = this.div.append("svg")
.datum(this.data[this.select].values)
.attr("width", this.width + this.margin.left + this.margin.right)
.attr("height", this.height + this.margin.top + this.margin.bottom)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
.call(this.zoom)
.on("mouseover", function () {
console.log("on mouseover");
self.div.style("background", "lightyellow");
})
.on("mouseout", function () {
console.log("on mouseout");
self.div.style("background", null);
})
.on("mousemove", function () {
console.log("on mousemove");
if (editDim)
{
d3.event.stopPropagation();
self.update();
}
})
.on("mousedown", function () {
console.log("on mousedown");
self.mousedown = true;
if (editDim)
{
d3.event.stopPropagation();
self.update();
}
})
.on("mouseup", function () {
console.log("on mouseup");
self.mousedown = false;
});
我正在使用 D3.behavior.zoom 方法 - 也许它与一个 DOM 元素相关联，该元素大于我的“鼠标上...”事件关联的 DOM 元素？如果是这样，我如何让两组事件覆盖相同的屏幕范围并互斥执行（再次，由“editDim”复选框选择）。当我将与“on mouse...”事件关联的 DOM 元素更改为“svg”上方的“div”元素时，我不再收到 mousedown 事件。
谢谢你。