Question

我在extjs面板中创建了一个svg。当我右键单击svg元素时，也会触发mouseover事件，这会更改svg，但我想要svg elemnt，因为它是在右键单击之前。我可以导出以前svg到图像而不是更改过的。

这是我的示例代码

var path = this.svg.selectAll("path")
        .data(partition.nodes(dataset))
        .enter().append("path")
        .attr("d", arc)
        .style("stroke","#fff")
        .style("stroke-width","1px")        
        .attr("fill-rule", "evenodd")
        .style("fill", function(d) { 
            return d.parent? getCurrColor(d) : "#FFFFFF"; 
        })
        .on("click", click)
        .on("mouseover", function(d) { return mouseover(d, this);})
        .on("mousemove", function(d) { return mousemove(d, this);})
        .on("mouseout", function(d){ return mouseout(d, this);});

在面板主体的上下文菜单中，这是代码

this.body.on('contextmenu', this.optionsMenu,this);

optionsMenu:function{
    var me = this;
    var xyArr = eventObject.getXY();
    eventObject.stopEvent();
    eventObject.preventDefault();
    var menuItems=[];

    var emailItem = {
            text:'Save as image',
            scope:this,
            handler:function(){
                //save as image
            },          
    };

    menuItems.push(emailItem);

   var menu = new Ext.menu.Menu({
                items : menuItems
    });     

        menu.showAt(eventObject.getXY());
}

Answer 1

在右键单击事件的XY位置创建上下文菜单时，鼠标指针将指向新菜单项。这导致SVG的mouseout事件。

因此，此问题的解决方案是使用mouseenter和mouseleave侦听器，而不是mouseover和mouseout侦听器。

d3防止在上下文菜单上触发mouseout

1 个答案: