d3防止在上下文菜单上触发鼠标悬停答案

【问题标题】：d3 prevent firing of mouseout on contextmenud3防止在上下文菜单上触发鼠标悬停
【发布时间】：2016-05-13 12:21:37
【问题描述】：

我在 extjs 面板中创建了一个 SVG。当我右键单击 SVG 元素时，也会触发 mouseover 事件，这会更改 SVG，但我想要 SVG 元素，就像右键单击之前一样。这样我就可以将以前的 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());
}

【问题讨论】：

您是否尝试在上下文菜单监听器中使用event.stopPropagation()？
stopPrapagation 不会冒泡......所以在正文上下文菜单上，它不会停止触发 svg 元素。
哦.. 是的.. 鼠标指针目标成为创建的新菜单项，从而导致 SVG 的 mouseout 侦听器。那么为什么不尝试使用mouseenter 和mouseleave 事件而不是mouseover 和mouseout？

标签： javascript d3.js svg extjs dom-events

【解决方案1】：

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

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

【讨论】：