javascript - d3 防止在上下文菜单上触发鼠标移出

标签 javascript d3.js svg extjs dom-events

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

最佳答案

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

因此,此问题的解决方案是使用 mouseentermouseleave 监听器,而不是 mouseovermouseout听众。

关于javascript - d3 防止在上下文菜单上触发鼠标移出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37209928/

相关文章:

html - Internet Explorer 10 和 11 中的灰度 CSS 背景?

javascript - 如何自动调用这个函数

javascript - 根据屏幕尺寸的视口(viewport)值

javascript - 在 jquery 插件中获取初始选择器

javascript - D3 降序音阶

html - 标签未显示在 D3 圆环图上

javascript - 调整窗口大小时的 d3 缩放行为

javascript - SVG 旋转和缩放转换问题

angular - 属性 'contentDocument' 在类型 'HTMLElement' 上不存在

javascript - 使用 jQuery 显示嵌套的 UL