我在 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 事件。
因此,此问题的解决方案是使用 mouseenter
和 mouseleave
监听器,而不是 mouseover
和 mouseout
听众。
关于javascript - d3 防止在上下文菜单上触发鼠标移出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37209928/