Javascript 为什么'；在鼠标上…'；功能异常

我有一个程序，允许用户通过两个2D切片（在两个窗口中）探索3D功能。函数编码在两个表中，每个维度一个表。要选择一个窗口中显示的切片，用户启用“editDim”复选框，然后单击另一个窗口中的拖动。未选中“editDim”时，用户可以平移和缩放每个窗口。问题是，在“editDim”模式下，如果我单击并拖动鼠标光标，鼠标光标将移出粉色着色的绘图区域，平移缩放将生效。我在JSFIDLE中加入了一个简化版本。
我添加了显示鼠标事件的日志消息，当不单击拖动（正常鼠标移动）时，我看不到图形区域周围区域的事件

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元素比我的“on mouse…”事件关联的DOM元素大？如果是这样，我如何使两组事件覆盖相同的屏幕范围并以独占方式执行mutual（同样，通过“editDim”复选框选择）。 当我将“on mouse…”事件关联的DOM元素更改为“svg”正上方的“div”元素时，我不再获得mousedown事件

---

谢谢。

您将事件附加到

g

元素，而不是

svg

我将代码更改为以下内容，以附加到svg：

this.div = d3.select(this.anchor).append("div");
    var 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);
    this.svg=SVG
        .append("g")
        .attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")")
        .call(this.zoom);
     SVG.on("mouseover", function () {//........

---

这并没有完全解决问题，尽管它确实改变了一点。尽管光标离开窗口（表格单元格），但平移和缩放仍然起作用。我不太明白，我回答了为什么不触发事件，我不确定你的目标是什么。我也看不到一种或另一种情况下的功能更改