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/

相关文章:

javascript - 让导出对象成为 CommonJS 中的函数可以吗?

javascript - Lib 剪贴板在 Promise 内部不起作用

javascript - 可缩放旭日与标签问题

javascript - 在 JavaScript 中为饼图设置数据格式问题

javascript - d3.js 在追加时不返回动态构造的 html 元素

javascript - onclick 函数有效,但 onsubmit 无效

javascript - 我的对象出了什么问题(关于knockoutjs映射插件)

javascript - d3 : canvas zooming with multiple images

javascript - 在 D3.js 中如何将 <g> 居中放置在 <svg> 中?

css - 如何将自定义 SVG 文件与 material-ui 图标组件一起使用?